画像スライドのナビゲーション設置

質問

はじめまして。
どうしてもわからない事がありますので質問させて下さい。
下記URLサイトを参考に、自分なりにカスタマイズしようとしましたが、
どうしても動かないため質問させて頂きます。

http://www.losttechnology.jp/WebDesign/2011/wizardimages.html

参考サイトの見本では画像をクリックすると次の画像に切り替わる動きですが、
これを「次へ」というテキストを押すと次の画像に、
「前へ」というテキストを押すと前の画像に変わるような仕様にしたいです。

$(function(){
function wizardImages(id) {
var targetId;
var maxImages;
targetId=id+' img';
maxImages=$(targetId).length;
$(targetId).css('display','none');
$(targetId+':first').css('display','inline');
$(targetId).click(function() {
$(this).css('display','none');
$(targetId).eq(($(this).index()+1)%maxImages).css('display','inline');
});
}
wizardImages('#setup');
});

html

<div id="setup">
<img src="*****" alt="*" width="*" height="*">
</div>

<span id="prev">前へ</span>
<span id="next">次へ</span>

事情により、既に存在するプラグインなどを使うのではなく、
あくまで上記コードをカスタマイズして作りたいと考えてます。

どうか皆様のお知恵をお貸しください。宜しくお願い致します。

回答No.1

nekomikekamo · ベストアンサー

上記コードと似たように作成するとこんな感じですか？
$(function(){
var images = $('#setup').find('img'),
max = images.length -1,
current = 0;
images.nextAll().hide();
$('#prev,#next').bind('click', function(e) {
images.eq(current).hide();
if(this.id==='prev'){
if(current > 0)current -=1;
}else{
if(current < max)current +=1;
}
images.eq(current).show();
});
});

お礼

かんぺきです！
ありがとうございます！
コードは全く理解できませんが・・・
nekomikekamo様の書いてくれたコードを１つ１つ自分なりに調べながら理解してみます！
理解すれば、アレンジも出来る様になると思うので頑張ります！
nekomikekamo様、本当にありがとうございました！