株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

41-11) 1.スライド式イメージギャラリー

 

画像の追加に対応、スライド式ギャラリー

jQueryの書き方 /*------------------------------------ */
//41-11. 画像の追加に対応、スライド式ギャラリーに改造する
/*------------------------------------ */
//選択処理
$("#navi_324 a").click(function(){
$("#main_324 img").before("<img src='"+$(this).attr("href")+"' alt='' class='wid400 marTop100'>");
$("#main_324 img:last").fadeOut(1000,function(){
$(this).remove();
});
return false;
})
//次へ選択処理
$("img.next").click(function(){
$("#navi_324 .pageWrap").animate({
marginLeft : parseInt($("#navi_324 .pageWrap").css("margin-left"))-300+"px"
},"fast");
});
//後ろへ選択処理
$("img.prev").click(function(){
$("#navi_324 .pageWrap").animate({
marginLeft : parseInt($("#navi_324 .pageWrap").css("margin-left"))+300+"px"
},"fast");
});
cssの書き方 ---------------------
HTMLの書き方 <div id="navi_324">
<div class="pageWrap">
<div class="page">
<ul>
<li><a href="photo1.jpg"><img src="photo1_thum.jpg" alt="シャンデリア" /></a></li>
<li><a href="photo2.jpg"><img src="photo2_thum.jpg" alt="バラ" /></a></li>
<li><a href="photo3.jpg"><img src="photo3_thum.jpg" alt="海" /></a></li>
<li><a href="photo4.jpg"><img src="photo4_thum.jpg" alt="門" /></a></li>
<li><a href="photo5.jpg"><img src="photo5_thum.jpg" alt="海" /></a></li>
<li><a href="photo6.jpg"><img src="photo6_thum.jpg" alt="あじさい" /></a></li>
<li><a href="photo7.jpg"><img src="photo7_thum.jpg" alt="空" /></a></li>
<li><a href="photo8.jpg"><img src="photo8_thum.jpg" alt="建物" /></a></li>
</ul>
<p><img src="btn_next.jpg" alt="次へ" class="next" /></p>
</div>

<div class="page">
<ul>
<li><a href="photo9.jpg"><img src="photo9_thum.jpg" alt="手" /></a></li>
<li><a href="photo10.jpg"><img src="photo10_thum.jpg" alt="床" /></a></li>
<li><a href="photo11.jpg"><img src="photo11_thum.jpg" alt="木" /></a></li>
<li><a href="photo12.jpg"><img src="photo12_thum.jpg" alt="緑" /></a></li>
<li><a href="photo13.jpg"><img src="photo13_thum.jpg" alt="花" /></a></li>
<li><a href="photo14.jpg"><img src="photo14_thum.jpg" alt="くらげ" /></a></li>
<li><a href="photo15.jpg"><img src="photo15_thum.jpg" alt="風船" /></a></li>
<li><a href="photo16.jpg"><img src="photo16_thum.jpg" alt="花" /></a></li>
</ul>
<p><img src="btn_prev.jpg" alt="前へ" class="prev" />
   <img src="btn_next.jpg" alt="次へ" class="next" />
</p>
</div>

<div class="page">
<ul>
<li><a href="photo17.jpg"><img src="photo17_thum.jpg" alt="花" /></a></li>
<li><a href="photo18.jpg"><img src="photo18_thum.jpg" alt="花" /></a></li>
<li><a href="photo19.jpg"><img src="photo19_thum.jpg" alt="花" /></a></li>
</ul>
<p><img src="btn_prev.jpg" alt="前へ" class="prev" /></p>
</div>
</div>
</div>
<div id="main_324">
<img src="photo1.jpg" class="wid400 marTop100" alt="" />
</div>