Question

这是我的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>

Answer 1

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

你现在传入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();
});
});

制作jQuery图像滑块循环

1 个答案: