<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>上面的代碼是一些照片的幻燈片放映。當我將鼠標懸停在照片上時，我想停止幻燈片放映。但這不起作用。如果我添加一個按鈕來停止幻燈片放映，它可以工作，但是當我使用鼠標懸停事件時，它不起作用。
2 回答
梵蒂岡之花
TA貢獻1900條經驗 獲得超5個贊
我在這里看到的一個問題是<img>標簽低于script標簽。當您嘗試附加addEventListenerat時document.getElementById('carousel-pics')，它將不起作用，因為document.getElementById('carousel-pics')此時為空。嘗試保持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>
上面是相同的代碼表示。您可以在第一個腳本中看到該元素null，而在第二個腳本中則不是
三國紛爭
TA貢獻1804條經驗 獲得超7個贊
如上所述，
改變順序。主體 div 先于腳本。
改個圖片名字就壞了
下面給出了示例
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 關注
- 141 瀏覽
添加回答
舉報
0/150
提交
取消