我的 html 網(wǎng)站在 javascript 中有一個(gè)自動(dòng)圖像輪播。輪播有 5 張圖片。輪播在第一輪效果很好，但在第二輪圖像中，第一張圖像沒(méi)有出現(xiàn)。我不確定為什么？如果可以的話請(qǐng)幫忙<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貢獻(xiàn)1793條經(jīng)驗(yàn) 獲得超6個(gè)贊
它第一次工作是因?yàn)槟牡谝粡垐D像（我假設(shè)是顯示的圖像）以正確的來(lái)源開(kāi)始。
看來(lái)您正在用其他來(lái)源覆蓋此圖像的來(lái)源。第一輪之后，第一張圖片的原始來(lái)源丟失了。
目前，您的圖像源可能是這樣的：
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
第一輪，沒(méi)關(guān)系。然而，一旦第二輪開(kāi)始，以及隨后的幾輪，它會(huì)是這樣的：
2,2,3,4,5 3,2,3,4,5 4,2,3,4,5 5,2,3,4,5
最簡(jiǎn)單的解決方案是將第一張圖像存儲(chǔ)為第六張圖像，這將與您現(xiàn)有的代碼一起使用。
另一種解決方案是將圖像源存儲(chǔ)在 JavaScript 變量中，并將它們用作源而不是引用其他元素。
慕無(wú)忌1623718
TA貢獻(xiàn)1744條經(jīng)驗(yàn) 獲得超4個(gè)贊
似乎你在集合中的第一個(gè)圖像每次運(yùn)行時(shí)images[0]都會(huì)覆蓋它的屬性，所以它的源值已經(jīng)丟失。這意味著它將不再可讀。不要使用集合中的第 0 個(gè)項(xiàng)目作為幻燈片的顯示目標(biāo)，而是嘗試給它一個(gè)唯一的類(lèi)名 ( ) 并單獨(dú)選擇它，例如：srcsetInterval<img class="slideshowTarget" src="...">
var slideshowTargetImage = document.querySelector('.slideshowTarget');
不要使用 ，而是imgLen.getElementsByTagName('img')嘗試向要在 ( <img class="slideshowImage" src="...">) 中循環(huán)的圖像添加類(lèi)名，然后使用類(lèi)似以下內(nèi)容的方式選擇它們：
var images = document.querySelectorAll('.slideshowImage');
接下來(lái)，您將希望圖像列表再次包含原始圖像，否則它不會(huì)出現(xiàn)在您的圖像列表中。你應(yīng)該把那個(gè)項(xiàng)目放在最后，這樣當(dāng)你的幻燈片放映循環(huán)時(shí)它就會(huì)在正確的位置。
<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>
接下來(lái)，您可以將循環(huán)邏輯簡(jiǎn)化為一個(gè)語(yǔ)句，您可以在設(shè)置圖像源后運(yùn)行該語(yǔ)句。,%或“取?！边\(yùn)算符會(huì)導(dǎo)致計(jì)數(shù)器在超過(guò) 時(shí)立即回到零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 關(guān)注
- 178 瀏覽
添加回答
舉報(bào)
0/150
提交
取消