ここにこの非常に単純なスライドショーがあります:フィドル
Jquery コード:
$("#slideshow > div:gt(0)").hide();
var maxindex = $('#slideshow > div').length;
var index = 0
var interval = 3 * 1000; // 3 seconds
var timerJob = setInterval(traverseSlideShow, interval);
function traverseSlideShow() {
console.log("current index: " + index);
$('#slideshow > div')
.stop()
.fadeOut(1000);
$('#slideshow > div').eq(index)
.stop()
.fadeIn(1000);
$('ul li').removeClass('active');
$('ul li:eq(' + index + ')').addClass('active');
index = (index < maxindex - 1) ? index + 1 : 0;
}
for (var i = 0; i < maxindex; i++) {
$('ul').append('<li class="' + (i == 0 ? 'active' : '') + '"></li>');
}
$(document).on('click', 'ul li', function () {
index = $(this).index();
traverseSlideShow();
clearInterval(timerJob);
timerJob = setInterval(traverseSlideShow, interval);
});
ご覧のとおり、3 つのボタンがあり、いずれかのボタンをクリックすると、クリックしたボタンに関連する写真にスライドショーが自動的に移動し、このボタンのスタイルが変化することがわかります (クリックして 3 秒経過した後)。
このコードには、修正しようとしている問題が 1 つあります。さて、ボタンのスタイルが変更された後、1秒間ボタンをクリックしないようにしようとしています。単純です。ボタンをクリックすると
、1秒以内に別のボタンを再クリックすることはできません。また、スライドショーが自動的に写真をロードする場合1 秒以内に他のボタンをクリックしても、他の写真を読み込むことはできません。