问题：图片轮播跳过第一张图片

Question

我的 html 网站在 javascript 中有一个自动图像轮播。轮播有 5 张图片。轮播在第一轮效果很好，但在第二轮图像中，第一张图像没有出现。我不确定为什么？如果可以的话请帮忙<script>            (function(){                        var imgLen = document.getElementById('gallery');                    var images = imgLen.getElementsByTagName('img');                    var counter = 1;                     if(counter <= images.length){                        setInterval(function(){                                images[0].src = images[counter].src;                            console.log(images[counter].src);                            counter++;                            if(counter === images.length){                                counter = 1;                            }                        },5000);                       }            })(); </script>

Answer 1

它第一次工作是因为您的第一张图像（我假设是显示的图像）以正确的来源开始。

看来您正在用其他来源覆盖此图像的来源。第一轮之后，第一张图片的原始来源丢失了。

目前，您的图像源可能是这样的：

1,2,3,4,5
2,2,3,4,5
3,2,3,4,5
4,2,3,4,5
5,2,3,4,5

第一轮，没关系。然而，一旦第二轮开始，以及随后的几轮，它会是这样的：

2,2,3,4,5
3,2,3,4,5
4,2,3,4,5
5,2,3,4,5

最简单的解决方案是将第一张图像存储为第六张图像，这将与您现有的代码一起使用。

另一种解决方案是将图像源存储在 JavaScript 变量中，并将它们用作源而不是引用其他元素。

Answer 2

似乎你在集合中的第一个图像每次运行时images[0]都会覆盖它的属性，所以它的源值已经丢失。这意味着它将不再可读。不要使用集合中的第 0 个项目作为幻灯片的显示目标，而是尝试给它一个唯一的类名 ( ) 并单独选择它，例如：srcsetInterval<img class="slideshowTarget" src="...">

var slideshowTargetImage = document.querySelector('.slideshowTarget');

不要使用 ，而是imgLen.getElementsByTagName('img')尝试向要在 ( <img class="slideshowImage" src="...">) 中循环的图像添加类名，然后使用类似以下内容的方式选择它们：

var images = document.querySelectorAll('.slideshowImage');

接下来，您将希望图像列表再次包含原始图像，否则它不会出现在您的图像列表中。你应该把那个项目放在最后，这样当你的幻灯片放映循环时它就会在正确的位置。

<div class="slideshow">

  <img class="slideshowTarget" src="0.jpg" />

  <div class="slideshowPreloadImages" style="display: none;">

    <img class="slideshowImage" src="1.jpg" />

    <img class="slideshowImage" src="2.jpg" />

    <img class="slideshowImage" src="3.jpg" />

    <img class="slideshowImage" src="0.jpg" />

  </div>

</div>

接下来，您可以将循环逻辑简化为一个语句，您可以在设置图像源后运行该语句。,%或“取模”运算符会导致计数器在超过 时立即回到零images.length - 1。

counter = (counter + 1) % images.length;

全部一起！

(function(){

    var slideshowTargetImage = document.querySelector('.slideshowTarget');

    var images = document.querySelectorAll('.slideshowImage');

    var counter = 0;

    var cycleSlideshow = function(){

        var nextImageSource = images[counter].src;

        slideshowTargetImage.src = nextImageSource;

        console.log('nextImageSource', nextImageSource);

        counter = (counter + 1) % images.length;

    };

    if (images.length) { // we can now test whether it's 0/falsy, becacuse the target is not part of the set!

        setInterval(

          cycleSlideshow,

          1000

        );   

    }

})();