為什么jQuery click（next）按鈕無法正常工作？

Question

我想用簡單的分頁制作簡單的jQuery淡入淡出輪播。
一切正常。 但是，當我單擊“ NEXT按鈕時，“輪播”每次都會返回到第一項。

如何解決這個問題？

小提琴

如果小提琴變陳舊，請參閱我的HTML：

<body>    
    <ul id="carousel">
        <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide1.jpg" width="960" height="375" alt="image 1" /></li>
        <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide2.jpg" width="960" height="375" alt="image 2"  /><li>
            <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide3.jpg" width="960" height="375" alt="image 3"  /></li>
            <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide4.jpg" width="960" height="375" alt="image 4"  /></li>
            <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide5.jpg" width="960" height="375" alt="image 5"  /></li>
    </ul>
<span class="prev">prev</span>
<span class="next">next</span>
</body>

和腳本：

$(document).ready(function() {
    slideShow();
});

function slideShow() {
    var showing = $('#carousel .is-showing');
    var next = showing.next().length ? showing.next() : showing.parent().children(':first');

    showing.fadeOut(800, function() {
        next.fadeIn(800).addClass('is-showing');
    }).removeClass('is-showing');
    setTimeout(slideShow, 5000);

    $(".next").click(function() {
        showing.fadeOut(800, function() {
            next.fadeIn(800).addClass('is-showing');
        }).removeClass('is-showing');
    })
}

Answer 1

您需要重寫一些代碼才能弄清楚。 在功能中拆分重復動作。

固定的例子

新腳本：

$(document).ready(function() {
    slideShow();
});

function slideShow() {
    var slides = $('#carousel li');
    var previousIndex = 0,
        currentIndex = 0,
        timer;
    slides.hide().removeClass('is-showing').eq(currentIndex).show().addClass('is-showing');

    function nextSlide() {
        previousIndex = currentIndex;
        if (currentIndex < slides.length - 1) currentIndex++;
        else currentIndex = 0;
        switchSlides();
    }

    function switchSlides() {
        slides.eq(previousIndex).removeClass('is-showing').fadeOut(300, function() {
            slides.eq(currentIndex).addClass('is-showing').fadeIn(300);
            autoRotate();
        });
    }

    function autoRotate() {
        clearTimeout(timer);
        timer = setTimeout(nextSlide, 5000);
    }

    autoRotate();
    $(".next").click(nextSlide);
}

Answer 2

因為在淡出時會刪除“正在顯示”類，因此對於這800ms，沒有“正在顯示”類

showing.fadeOut(800, function() {
    next.fadeIn(800).addClass('is-showing');
}).removeClass('is-showing');

因此，當到達此代碼時，沒有“當前項目”，因此按照您的邏輯轉到第一項

var showing = $('#carousel .is-showing');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');

為什么jQuery click（next）按鈕無法正常工作？

問題描述

小提琴

2 個解決方案

解決方案1
2 已采納 2012-10-07 14:39:55

固定的例子

解決方案2
1 2012-10-07 14:41:52

為什么jQuery click（next）按鈕無法正常工作？

問題描述

小提琴

2 個解決方案

解決方案1 2 已采納 2012-10-07 14:39:55

固定的例子

解決方案2 1 2012-10-07 14:41:52

解決方案1
2 已采納 2012-10-07 14:39:55

解決方案2
1 2012-10-07 14:41:52