無法自動滾動JavaScript滑塊
[英]Unable to autoscroll JavaScript slider
問題描述
我正在嘗試創建一個純JavaScript滑塊，該滑塊會在頁面加載時自動滾動。 滑塊首次成功觸發，這就是問題所在。 當此滑塊通過setInterval()函數進行第二次迭代時，列表項將變得不確定（即'i'的值 ）。 我也希望滑塊自動滾動。 我需要借助純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>
請幫我弄清楚！ 謝謝..
2 個解決方案
解決方案1
2 已采納 2017-03-06 06:48:11
我們可以在setInterval()幫助下，在img element src進行定期更改時使其自動向左滑動。
碼：
function slider() { // var ul = document.getElementById("imageSlider"); // var liItems = ul.getElementsByTagName("li"); // var imageWidth = liItems[0].offsetWidth; // var imageNumber = liItems.length; setInterval(function() { var souc = document.getElementsByClassName("image-style"); var firstSrc = souc[0].src for (var i = 0; i < souc.length -1; i++) { souc[i].src = souc[i+1].src; } souc[souc.length-1].src = firstSrc; }, 2000); }
.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; }
<body onload="slider()"> <div> <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> </div> </body>
注意：全頁打開摘要，您可以清楚地了解。
我希望它對您有幫助。
解決方案2
1 2017-03-06 05:15:19
我猜您的問題是在第一次迭代將元素向右移動時出現的，但由於沒有元素向左重復，因此不會重復出現。
您可以嘗試創建一個函數，該函數將所有元素移回到elements.lenth循環的原始位置，同時還將動畫顯示到最后一個元素。
將Autoscroll添加到JavaScript滑塊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.