JavaScript中的圖像旋轉不起作用

Question

我是新來的，這是我上課的第一個問題。 我正在嘗試使圖像旋轉可在javascript中工作，但對我來說不起作用。 有人可以幫忙嗎？ 我嘗試了控制台日志記錄，並且一切正常。

我在另一個函數中包含此代碼，以便當最終用戶單擊按鈕時觸發旋轉

t = setInterval（scrollImages，50）;

 function scrollImages() { var coverBarDiv = document.getElementById("coverBar"); var images = coverBarDiv.getElementsByTagName("img"); for (var i = 0; i < images.length; i++) { var left = images[i].style.left.substr(0, images[i].style.left.length - 2); if (left <= -86) { left = 532; } images[i].style.left = (left - 1) + "px"; } } 

 #coverBar { height: 115px; left: 182px; overflow: hidden; position: absolute; top: 560px; width: 440px; } #cover img { position: absolute; top: 0; } 

 <div id="coverBar"> <img src="images/coverMatrix.jpg" width="82" height="115" style="left: 0px;"> <img src="images/coverDeadRingers.jpg" width="82" height="115" style="left: 88px;"> <img src="images/coverDrStrangelove.jpg" width="82" height="115" style="left: 176px;"> <img src="images/coverFuturama.jpg" width="82" height="115" style="left: 264px;"> <img src="images/coverHolyGrail.jpg" width="82" height="115" style="left: 356px;"> <img src="images/coverRaisingArizona.jpg" width="82" height="115" style="left: 444px;"> <img src="images/coverRobotChicken.jpg" width="82" height="115" style="left: 532px;"> </div> 

Answer 1

一切都很好！ CSS選擇器中只有一個錯字： #cover img應該是#coverBar img

 t = setInterval(scrollImages, 20); function scrollImages() { var coverBarDiv = document.getElementById("coverBar"); var images = coverBarDiv.getElementsByTagName("img"); for (var i = 0; i < images.length; i++) { var left = images[i].style.left.substr(0, images[i].style.left.length - 2); if (left <= -86) { left = 532; } images[i].style.left = (left - 1) + "px"; } } 

 #coverBar { height: 115px; left: 20px; overflow: hidden; position: absolute; top: 60px; width: 440px; } #coverBar img { position: absolute; top: 0; } 

 <div id="coverBar"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 0px;"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 88px;"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 176px;"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 264px;"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 356px;"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 444px;"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 532px;"> </div>