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

我确实设法通过在更改图片时添加fadeOut来修复代码。

当点击左箭头时，第二张图像可能位于第一张图像的顶部，因此您无法看到正确的图像

$（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
        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中的变量向后计数？

1 个答案: