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

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">&nbsp; <img class="slideshowTarget" src="0.jpg" />&nbsp; <div class="slideshowPreloadImages" style="display: none;">&nbsp; &nbsp; <img class="slideshowImage" src="1.jpg" />&nbsp; &nbsp; <img class="slideshowImage" src="2.jpg" />&nbsp; &nbsp; <img class="slideshowImage" src="3.jpg" />&nbsp; &nbsp; <img class="slideshowImage" src="0.jpg" />&nbsp; </div></div>接下来，您可以将循环逻辑简化为一个语句，您可以在设置图像源后运行该语句。,%或“取模”运算符会导致计数器在超过 时立即回到零images.length - 1。counter = (counter + 1) % images.length;全部一起！(function(){&nbsp; &nbsp; var slideshowTargetImage = document.querySelector('.slideshowTarget');&nbsp; &nbsp; var images = document.querySelectorAll('.slideshowImage');&nbsp; &nbsp; var counter = 0;&nbsp; &nbsp; var cycleSlideshow = function(){&nbsp; &nbsp; &nbsp; &nbsp; var nextImageSource = images[counter].src;&nbsp; &nbsp; &nbsp; &nbsp; slideshowTargetImage.src = nextImageSource;&nbsp; &nbsp; &nbsp; &nbsp; console.log('nextImageSource', nextImageSource);&nbsp; &nbsp; &nbsp; &nbsp; counter = (counter + 1) % images.length;&nbsp; &nbsp; };&nbsp; &nbsp; if (images.length) { // we can now test whether it's 0/falsy, becacuse the target is not part of the set!&nbsp; &nbsp; &nbsp; &nbsp; setInterval(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cycleSlideshow,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 1000&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp;&nbsp; &nbsp; }})();