<script> var pics = [ "image/city (1).jpg", "image/city (2).jpg", "image/city (3).jpg", "image/city (4).jpg", "image/city (5).jpg", "image/city (6).jpg", "image/city (7).jpg", "image/city (8).jpg", "image/beach.jpg", "image/beach2.jpg" ]; var inval; var photo; function carousel() { photo = document.getElementById('carousel-pics'); var i = -1; inval = setInterval(function() { i++; if (i >= pics.length) { i = 0; } photo.src = pics[i]; }, 1000); } function removeInterval() { clearInterval(inval); } document.getElementById('carousel-pics').addEventListener("mouseover", removeInterval);</script><div class="polaroid" id="carousel-div" style="width:1000px; height:600px;"> <img id="carousel-pics" src="image/city (1).jpg" alt="athens" style="width:1000px; height:600px;"> </div>上面的代碼是一些照片的幻燈片放映。當(dāng)我將鼠標(biāo)懸停在照片上時(shí)，我想停止幻燈片放映。但這不起作用。如果我添加一個(gè)按鈕來(lái)停止幻燈片放映，它可以工作，但是當(dāng)我使用鼠標(biāo)懸停事件時(shí)，它不起作用。
2 回答
梵蒂岡之花
TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊
我在這里看到的一個(gè)問(wèn)題是<img>標(biāo)簽低于script標(biāo)簽。當(dāng)您嘗試附加addEventListenerat時(shí)document.getElementById('carousel-pics')，它將不起作用，因?yàn)閐ocument.getElementById('carousel-pics')此時(shí)為空。嘗試保持script在 html 以下。
<script>
let ele1 = document.getElementById("test")
console.log('[1]' , ele1)
</script>
<div id="test"></div>
<script>
let ele2 = document.getElementById("test")
console.log('[2]' , ele2)
</script>
上面是相同的代碼表示。您可以在第一個(gè)腳本中看到該元素null，而在第二個(gè)腳本中則不是
三國(guó)紛爭(zhēng)
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超7個(gè)贊
如上所述，
改變順序。主體 div 先于腳本。
改個(gè)圖片名字就壞了
下面給出了示例
var pics = [
"https://images.unsplash.com/photo-1555797487-a1f30b5d8d55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=589&q=400",
"https://images.unsplash.com/photo-1533158307587-828f0a76ef46?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80",
"https://images.unsplash.com/photo-1555797487-a1f30b5d8d55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=589&q=400"
];
const photo = document.getElementById("carousel-pics");
function carousel() {
let index = -1;
const inval = setInterval(function() {
index++;
if (index >= pics.length) (index = 0);
photo.src = pics[index];
}, 1000);
return () => clearInterval(inval)
}
const unsubsriber = carousel()
photo.addEventListener("mouseover", unsubsriber);
<div class="polaroid" id="carousel-div" style="width:1000px; height:600px;">
<img id="carousel-pics" src="https://images.unsplash.com/photo-1555797487-a1f30b5d8d55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=589&q=400" alt="athens" style="width:1000px; height:600px;">
</div>
- 2 回答
- 0 關(guān)注
- 118 瀏覽
添加回答
舉報(bào)
0/150
提交
取消