横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
画像の追加に対応、スライド式ギャラリー
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> |