我的 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>
2 回答
搖曳的薔薇
TA貢獻1793條經驗 獲得超6個贊
它第一次工作是因為您的第一張圖像（我假設是顯示的圖像）以正確的來源開始。
看來您正在用其他來源覆蓋此圖像的來源。第一輪之后，第一張圖片的原始來源丟失了。
目前，您的圖像源可能是這樣的：
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 變量中，并將它們用作源而不是引用其他元素。
慕無忌1623718
TA貢獻1744條經驗 獲得超4個贊
似乎你在集合中的第一個圖像每次運行時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
);
}
})();
- 2 回答
- 0 關注
- 184 瀏覽
添加回答
舉報
0/150
提交
取消