jquery(js)にて実装したいスライドショー

jquery(js)にて実装したいスライドショー機能があります。

参考サイト
http://j-sen.jp/kanto/city_411_1.htm

サムネイル画像下の
"他の写真を見る"の左右の矢印をクリックでサムネイルが
切り替わる機能です。

写真のＵＲＬはシステムにより吐き出すため,
枚数は決め打ちではないので、配列に画像URLを入れていくとは思うのですが、
うまくソースがかけません。

地頭のある方、何卒力添え宜しくお願いいたします。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2013/04/25 00:47

サムネイルがあるのでしょうから、簡単そうな方法のひとつとして、拡大表示中のサムネイルにactiveなどの（なんでもよいですが）クラスを設定しておいて、矢印がクリックされたら、その次／前の画像を拡大表示してあげるというのが考えられます。

クラス設定をしなくても、拡大表示中の画像の順番（インデックス）を変数に記憶しておくような方法でも同様に処理ができるでしょう。

他にも、いろいろ方法はあるとおもいますが、ご参考まで。

この回答へのお礼

なるほど、、、ありがとうございます！

お礼日時：2013/04/29 22:51

No.1 回答者： Taiyonoshizuku 回答日時： 2013/04/24 08:49

うまくかけないソースはどこまでかけたの？

0から作ってって事？

力添えはするけど、0からは作れないよ。

この回答への補足

ありがとうございます。ソース記載します。
jqueryでいわゆる小さいサムネ画像をクリックしたらそのaのhrefを取得して
メイン画像部分に表示、見た目はフェードインフアウトさせる、
まではつくりました。
これを基に、参考サイトのように
「左右の矢印をクリック時に、配列から順にとりだしたurlにsrcを変更し、
かつ最初(or最後)の値の時ループさせる」
の機能を追加するところで、躓いています。

//メイン画像をサムネクリックで変化
$('.thumb-image a').click(function() {
var thishref = this.href;
$("img#main-position").fadeOut('fast',function() {
$(this).attr("src",thishref).fadeIn('fast');
});
//a の無効化
return false ;
});

補足日時：2013/04/24 10:04