Question

我正在为网站制作快速幻灯片。我还在处理我的Javascript / jQuery，所以我可能会在将来简化我的代码。无论如何，我使用setTimeout函数来增加currentImage变量。但是，它似乎没有正常工作，因为图像不会随着时间的推移而改变。后退和下一个按钮仍然有效，但似乎它正在跳过其中一个图像。

$(document).ready(function(){
    var topofDiv = $("header").offset().top;
    var height = $("header").outerHeight();
    $(window).scroll(function(){    
        if($(window).scrollTop() > (topofDiv + height))
        {
            $("#nav").css("position","fixed");
        }
        else
        {
            $("#nav").css("position","static");
        }
    });
    var currentImage = 0;
    function autoPlay()
    {
        window.setTimeout(function(){
            currentImage++;
        }, 1000);
    };
    function slideImage()
    {
        if(currentImage == 0)
        {
            $(".img1").fadeIn(1000).show();
        }
        else
        {
            $(".img1").fadeOut(1000).hide();
        }
        if(currentImage == 1)
        {
            $(".img2").fadeIn(1000).show();
        }
        else
        {
            $(".img2").fadeOut(1000).hide();
        }
        if(currentImage == 2)
        {
            $(".img3").fadeIn(1000).show();
        }
        else
        {
            $(".img3").fadeOut(1000).hide();
        }
    };
    slideImage();
    autoPlay();
    $("#next").mouseenter(function(){
        $(this).css("color","black");
    });
    $("#next").mouseleave(function(){
        $(this).css("color","white");
    });
    $("#back").mouseenter(function(){
        $(this).css("color","black");
    });
    $("#back").mouseleave(function(){
        $(this).css("color","white");
    });
    $("#next").click(function(){
        clearTimeout(autoPlay);
        currentImage++;
        if(currentImage >= 3)
        {
            currentImage = 0;
        }
        slideImage();
    });
    $("#back").click(function(){
        clearTimeout(autoPlay);
        currentImage--;
        if(currentImage < 0)
        {
            currentImage = 2;
        }
        slideImage();
    });
});

Answer 1

请尝试以下代码。您需要在slideimage function内拨打setInteval并使用setInterval而不是setTimeout。因此，在每1秒内，currentImage值将增加1，并显示适当的图像。当currentImage值大于3时，将值重置为零并通过调用slideimage dunction显示第一个图像

 var interval ="";
 interval = window.setInterval(function(){
        currentImage++;
        slideImage();
        if(currentImage > 3)
        {
          currentImage = 0;
          slideImage();
        }

    }, 1000);

    function RemoveInterval() {
       clearInterval(interval );
    }

致电RemoveInterval

中的next and back button click

Jquery setTimeout Isn不工作（图片幻灯片）

1 个答案: