如何通过js中的变量向后计数？

Question

我正在制作一个简单的幻灯片放映，它带有左右箭头，可以在列表项中导航，其中包含 imgs。我有右箭头可以在列表中前进，但无法让左箭头在列表中后退。它似乎只是在单击后随机跳转到最后一张幻灯片。如何通过变量向后计数以显示最后一张幻灯片？

Codepen 在这里：http://codepen.io/patrickaltair/pen/oxrZVg

相关js：

$( document ).ready(function() {

    var slide = $('.slide');
    var slideIndex = -1;


    function showFirstSlide() {
            // Add 1 to slide index
            slideIndex++;
            slide.eq(slideIndex % slide.length)
                .fadeIn(1000);
        }

        showFirstSlide();


    $('.right').click(function(){

        function showNextSlide() {
            // Add 1 to slide index
            slideIndex++;
            slide.eq(slideIndex % slide.length)
                .fadeIn(1000);
        }

        showNextSlide();

    });

    $('.left').click(function(){

        function showPreviousSlide() {
            // Substract 1 from slideIndex
            slideIndex--;
            slide.eq(slideIndex % slide.length)
                .fadeIn(1000);
        }

        showPreviousSlide();

    });

});

Answer 1

我确实通过在更改图像时添加淡出来修复您的代码。

可能是在单击向左箭头时第二张图片在第一张上面，所以您看不到正确的图片

$(文档).ready(函数(){

    var slide = $('.slide');
    var slideIndex = -1;


    function showFirstSlide() {

            // Add 1 to slide index

            slideIndex++;

            slide.eq(slideIndex % slide.length)
                .fadeIn(1000);
        }

        showFirstSlide();


    $('.right').click(function(){

        function showNextSlide() {

            // Add 1 to slide index
        slide.eq(slideIndex % slide.length).fadeOut(1000);
            slideIndex++;
            slide.eq(slideIndex % slide.length)
                .fadeIn(1000);
        }

        showNextSlide();

    });

    $('.left').click(function(){

        function showPreviousSlide() {
                    // Add 1 to slide index
        slide.eq(slideIndex % slide.length).fadeOut(1000);
            slideIndex--;
            slide.eq(slideIndex % slide.length)
                .fadeIn(1000);
        }

        showPreviousSlide();

    });

});

如何通过js中的变量向后计数？

How to count backward through a variable in js?

javascript

jquery

slideshow