スライドショー「Glider.js」のカスタマイズ

質問

スライドショーのJavascript「Glider.js」を利用してWEBサイトを制作しています。

組み込みは概ね上手くいったのですが、一点機能自体に要望があり、
これの解決方法をご教授いただきたく存じます。

■要望：
『手動で移動した際に、自動スクロールの待機カウントをリセットする』

□サンプルJSファイル（一部カスタマイズ済）
　http://www.mediafire.com/?ngg2nllkaco76x2
　⇒「Click here to start～」の部分をクリックして保存してください。
　　※ポップアップの広告が出ます。大変恐縮ですがご了承ください。

■経緯：
　サンプルを少し触っていただければお分かりいただけると思いますが、
　このJSの機能として、「自動スクロール」と「手動スクロール」が共存しています。
　「自動スクロール」は1秒間隔（変更可能）でスクロールしているのですが、
　手動でスクロールさせた際にもカウントは関係なく進んでおり、
　タイミングによっては手動でスクロールさせた瞬間に次へ行ってしまいます。
　そこで、手動でスクロールさせた際には待機カウントを
　再度0から始められるようにできないか、というのが現状の課題です。

■解決に向けて：
　恥ずかしながらJSに関してはド素人で、可能であればJSファイルに
　数行足す形で改造したいと考えています。
　おそらく、「クリックしたら次へ」と命令を出している部分に
　「併せてカウントを再度始める（リセットする）」という命令を足せれば、
　シンプルかなと思います。
　ただし、方法自体に強いこだわりはありませんので、
　きちんと動いてくれれば大きく書き換えていただいてもOKです。

以上、お力添えのほど、よろしくお願い申し上げます。
説明に不明なところがあればご質問ください。

回答No.1

nekomikekamo · ベストアンサー

HTML部
gliderObj1の実行方法を以下のとおり変更
[元]
gliderObj1 = new Glider("glider1");
setInterval('gliderObj1.next()', 2000);

[変更後]
gliderObj1 = new Glider("glider1",{ duration: 1.0, frequency: 2 });
gliderObj1.start();

[glider.js部]
click: function(event) の最後に以下の処理を追加。
this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000 + 1000);

で、どうでしょうか。

お礼

うおおっ！すごい！完璧！
「こんな回答だったら嬉しいな～」と思っていた形にドンピシャでした…！

最終的に、HTML側の“frequency: 2”を“4”にして自動スクロールの間隔を空け、
JS側の“this.options.frequency*1000 + 1000”を“2000 + 1000”にして、
手動スクロールした後は動き始めるまでの時間が長くなるようにしました。

カウントをリセットできるだけでまず満足だったのですが、
結果的に手動の際の追加機能(？)も足していただいた形になってしまいました（笑）。
…もしやこれも見越しての書き方だったのか…！！？
うーん、恐れ入りました。。

P.S.
お返事遅くなりまして申し訳ありませんでした。
もう回答がもらえないんじゃないかと半ば諦めてて昨日・一昨日は見ていませんでした。。
本当にありがとうございました。