スライドを移動するための次のボタンと前のボタンを備えた単純な jQuery スライダーを作成しました。ボタンが手動で押されていないときに自動スクロールできるようにしたいと思います。次に、誰かがスライドにカーソルを合わせたときにスクロールを停止し、スライドにカーソルを合わせていないときにスクロールを再開したいと考えています。
ここでこのコードを使用しましたが、最初のスライドのみをスクロールし、それを続行しません。
setTimeout(function() {
jQuery('#next').trigger('click');
}, 1000);
}
これを継続的にスライドさせるにはどうすればよいですか? また、スライドの上にカーソルを置いたときに停止するにはどうすればよいですか?
私のhtmlマークアップはこれです:
<ul class="nav">
<li><a id="prev" onclick="prev()"></a>Prev</li>
<li><a id="next" onclick="next()"></a>Next</li>
</ul>
<div id="viewport">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
スクリプトはここでも使用されています: http://www.samskirrow.com/projects/carousel
今、私はこのjQueryコードを使用しています。スライダーは自動的に変化し、ホバーすると停止します....しかし、ページの読み込みでは開始されません。どのような変更を加える必要がありますか??
jQuery('#viewport').hover(function() {
window.clearInterval(timer);
}, function() {
timer = window.setInterval(function(){ jQuery('#next').trigger('click');
}, 1000);
});