0

这是我的 jquery 图像滑块的代码。它具有下一个和上一个按钮，并且在悬停时会暂停，但是当它到达最后一张幻灯片时，它会开始一遍又一遍地循环第一张幻灯片。任何帮助，将不胜感激。我似乎无法弄清楚，我盯着它看我的大脑很痛..

$(document).ready(function(){
window.currentIndex = 0;
function slide(index) {

    index = index >= $('#slides img').length ? 0 : index;


    $('#caption, #slide').fadeOut(500, function () {
        $el = $('#slides img:eq('+index+')');
        $('#caption').text($el.attr('alt'));
        $('#slide').attr('src', $el.attr('src'));
        $('#caption, #slide').fadeIn(500);
    });
}
$("#featuredSlider").mouseenter(function(){
    if (timer) { 
        clearInterval(timer);
    }
});
$("#featuredSlider").mouseleave(function(){
    timer = setInterval(function(){
        slide(++window.currentIndex);
    },3000);
}).mouseleave();

//bind next / prev buttons
$("#featuredPrev").on('click', function () {
    slide(--window.currentIndex);
});
$("#featuredNext").on('click', function () {
    slide(++window.currentIndex);
});
});

这是HTML：

<section id="featuredSlider">
<img id="slide"  src="images/image1.png" alt="Hello">

<div id="slides">
<img src="images/image1.png" alt="">
<img src="images/image2.png" alt="">
<img src="images/image3.png" alt="">
</div>
<div id="arrows">
<div id="featuredPrev"></div>
<div id="featuredNext"></div>
</div>
</section>
4

1 回答 1

2

您正在增加计时器中的 window.currentIndex ，这就是传递给幻灯片功能的内容。如果您有五张幻灯片，它将完美运行，直到您通过最后一张幻灯片。该函数的实际运行方式是：

您现在传入 6... 是否大于或等于 6？是的，转到幻灯片 0... 将 window.currentIndex 增加到 7 并将其传入。是否大于或等于 6？是的，转到幻灯片 0... 将 window.currentIndex 增加到 8 并将其传入。是否大于或等于 6？是的，转到幻灯片 0... 将 window.currentIndex 增加到 8 并将其传入。等等...

您需要重置 currentIndex 变量，因为它在函数的范围内，您可以访问不需要在内部传递它并在两个地方跟踪索引。尝试这个。

$(document).ready(function(){
currentIndex = 0;
function slide() {

    if ( currentIndex >= $('#slides img').length )
      currentIndex = 0

    if ( currentIndex < 0 )
      currentIndex = $('#slides img').length - 1

    $('#caption, #slide').fadeOut(500, function () {
        $el = $('#slides img:eq('+currentIndex+')');
        $('#caption').text($el.attr('alt'));
        $('#slide').attr('src', $el.attr('src'));
        $('#caption, #slide').fadeIn(500);
    });
}
$("#featuredSlider").mouseenter(function(){
    if (timer) { 
        clearInterval(timer);
    }
});
$("#featuredSlider").mouseleave(function(){
    timer = setInterval(function(){
        currentIndex++;
        slide();
    },3000);
}).mouseleave();

//bind next / prev buttons
$("#featuredPrev").on('click', function () {
    currentIndex--;
    slide();
});
$("#featuredNext").on('click', function () {
    currentIndex++;
    slide();
});
});
于 2013-08-31T05:47:17.810 回答