自動再生する方法

質問

上部に拡大画像があり、下部にサムネイルを数枚配置しておりサムネイルを
クリックすると拡大画像が切り替わるというものを作成しました。

内容は省略しますがこのような感じです。

$(function(){
$('.thumb li').click(function(){
// 処理
});
});

この場合、「クリックすると」という条件で動作します。

これを自動再生したいのですが、どのような構成で書けばいいのでしょうか？
具体的なイメージは、このような流れです。

1:1枚目のサムネイルを選択状態とし3秒(仮)停止
2:1枚目の表示が3秒(仮)経過したら2枚目のサムネイルを選択状態とし3秒(仮)停止
3:2枚目の表示が3秒(仮)経過したら3枚目のサムネイルを選択状態とし3秒(仮)停止

以下サムネイルの数だけ同様に再生し最後になったら最初に戻り再生する。

回答No.3

fujillin · ベストアンサー

#1です。

イメージ的にはそんなもんでしょう。

両方を実装した場合は、インターバルで定期的に処理をしているところへ、クリックの処理が割り込むかたちになりますので、順序の整合をどうするかとかクリックした時点からインターバルの時間を計測し直すなどの処理が必要になるかも知れません。

＞$('.thumb li').autofunc();
お気付きとは思いますが、対象全部に対して処理する必要はないのでは？
また、このままでは多分エラーになります。
（autofuncをエクステンドしているのなら別ですが…）

お礼

setInterval(function(){
autofunc();
}, 5000);

おっしゃる通り上記でOKですね！凡ミスでしたw
ご丁寧にお付き合いいただきありがとうございました！

回答No.2

fujillin

#1です。

＞「次のサムネイルを選択・表示する」とは、どのように行うのでしょうか？
いろいろな方法が考えられると思います。

例えば、
◇サムネイルがＨＴＭＬソースに記されている場合
たいていは、何らかの同じ形式で連続的に記されていると思いますので（例：ulのli要素群）、表示されている要素に対して次の兄弟要素が次に表示すべき要素となるので一意に決まります。（最後までいったら、最初に戻る）
この画像に対して、
＞クリックすると拡大画像が切り替わるというものを作成しました。
の時の処理内容を実行すればよろしいかと思います。

あるいは、
◇サムネイルのURIをスクリプトの配列等で持っている場合
表示しているURIのindexを保持できるようにしておけば、indexをインクリメントすることで次の画像（URI）がわかります。（indexが配列の数を超えたら最初に戻す）
あとは、1）と同様に表示をすればよろしいかと。

拡大表示している画像のサムネイルにそのサインを示しているような場合（枠をつけたり、アイコンで示したり、透明度を変えるなど）は、拡大表示だけでなくそちらの処理も同時に行うことになります。
また、サムネイルと拡大画像のURIが異なる場合はその辺の調整（読替え）も必要になります。
これを#1に書きましたように、繰り返すようにしておけばよいと思います。

他にも方法はいろいろあるかと思いますが、考え方はとしてはほぼ同様でいけるのではないでしょうか。

補足

なんとなくイメージがわきました！
根本的な部分ですが、通常はクリックで関数を実行しますが自動再生する場合
このような感じで合ってますか？

自動再生用の処理とクリックした際の処理については、重複する部分もありますが
関数を実行する処理をわけなきゃないのでしょうがないですかね・・・

$(function(){

setInterval(function(){
$('.thumb li').autofunc();
}, 5000);

function autofunc(){
// 自動再生用の処理
}

$('.thumb li').click(function(){
// クリックした際の処理
});

});

回答No.1

fujillin

setIntervalまたはserTimeoutを利用して3秒おきに
　「次のサムネイルを選択・表示する」
という処理を繰り返す。

補足

お返事ありがとうございます。
「次のサムネイルを選択・表示する」とは、どのように行うのでしょうか？
参考までにもう少し詳しく教えていただけると助かります。