我想創建一個純JavaScript滑塊,它會在頁面加載時自動滾動。第一次成功觸發滑塊,問題就出現了。當此滑塊經過第二次迭代的setInterval()
函數時,列表項不確定(即:'i'的值)。另外我想讓滑塊自動滾動。我需要這個在pure JavaScript的幫助下完成。這裏是我的代碼,無法自動滾動JavaScript滑塊
JS:
function slider() {
var ul = document.getElementById("imageSlider");
var liItems = ul.getElementsByTagName("li");
var imageWidth = liItems[0].offsetWidth;
var imageNumber = liItems.length;
setInterval(function() {
for (var i = 0; i <= liItems.length; i++) {
liItems[i].style.right = liItems[i].style.right + imageWidth + 'px';
}
}, 2000);
}
CSS:
.slider-wrapper {
height: 115px;
width: 100%;
}
.slide-wrapper {
height: 95px;
width: 274px;
background-image: linear-gradient(#aaaaaa,#e2e2e2);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s ease-out;
-webkit-transition: background-position 0.5s ease-out;
-moz-transition: background-position 0.5s ease-out;
-o-transition: background-position 0.5s ease-out;
-ms-transition: background-position 0.5s ease-out;
display: inline-block;
vertical-align: middle;
margin: 10px;
}
.slide-wrapper:hover {
height: 95px;
width: 274px;
background-position: 0 0;
}
.slide {
display: inline-block;
position: relative;
}
ul {
margin: 0;
padding: 0;
width: 100%;
}
.image {
text-align: center;
height: 95px;
width: 274px;
line-height: 92px;
}
.image-style {
max-width: 150px;
width: auto;
max-height: 75px;
height: auto;
vertical-align: middle;
}
.left-arrow {
width: 75px;
height: 115px;
float: left;
position: relative;
font-family: 'Dosis', sans-serif;
font-size: 75px;
}
.right-arrow {
width: 75px;
height: 115px;
float: right;
position: relative;
font-family: 'Dosis', sans-serif;
font-size: 75px;
}
.image-slider-ul {
text-align: center;
display: block;
white-space: nowrap;
padding: 0;
}
.container-middle {
display: inline-block;
height: 115px;
overflow: hidden;
width: 1188px;
}
HTML:
<body onload="slider()">
<ul id="imageSlider" class="image-slider-ul">
<div class="slider-wrapper">
<div class="left-arrow"><</div>
<div class="container-middle">
<li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/1-Number-PNG.png" class="image-style"></div></div></li>
<li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/2-Number-PNG.png" class="image-style"></div></div></li>
<li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/3-Number-PNG.png" class="image-style"></div></div></li>
<li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/4-Number-PNG.png" class="image-style"></div></div></li>
<li class="slide"><div class="slide-wrapper"><div class="image"><img src="http://www.pngall.com/wp-content/uploads/2016/04/5-Number-PNG.png" class="image-style"></div></div></li>
</div>
<div class="right-arrow">></div>
</div>
</ul>
</body>
請幫我想出解決辦法! Thankyou ..
將環路改爲for(var i = 0; i <= liItems.length - 1; i ++){ –
@Velko試過了,但問題仍然存在:( –
如果你減去1的長度,未定義的錯誤不應該然後自動滾動會停止,因爲你到達結束時還沒有執行完畢,你還會得到未定義的錯誤,或滾動停止嗎? –