Question

一切正常，除了后退按钮它没有做任何事情，而前进按钮没有，但我基本上完成了相同的代码，除了使它减少请不要jquery和感谢提前帮助也非常新的JavaScript。

 var images = ['html.png', 'css3.png', 'WebDevLogo.jpg', 'Programmer%20Wallpaper.jpg', 'CSS3Thing.png', 'CSS3%20Wallpaper.jpg', 'HTML5%20Wallpaper.png'];
                var currentImage = 0;

                function loop() {
                    currentImage++;
                    if(currentImage > images.length -1){
                        currentImage = 0;
                    }
                        setImage();
                }

                function setImage() {
                    document.getElementById('image').src = images[currentImage];
                }

                function Forward() {
                    currentImage = currentImage++;
                    loop()
                }

                function Back() {
                    currentImage = --currentImage;
                    loop()
                }

                setInterval(loop, 3000);

Answer 1

后退按钮不执行任何操作，因为在loop中您始终移动到下一个图像。因此，Back会返回，然后loop将其向前移动。

将代码从loop移动到setImage。使用setImage中的Forward和Back而不是loop。我的意思是移动

if (currentImage > images.length -1) {
    currentImage = 0;
}

使用递增和递减而不指定它。它弄乱了你的结果。

++currentImage; // in Forward
--currentImage; // in Back

您还可以使用

改善图像轮换

currentImage %= images.length;

而不是

if (currentImage > images.length -1) {
    currentImage = 0;
}

您可能遇到的另一个问题是推送Back或Forward不会重启setTimeout loop。使用clearTimeout和setTimeout或使用共享时间锁。

图像循环工作，但用户控制部分工作

1 个答案: