无法自动滚动JavaScript滑块

我想创建一个纯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">&lt;</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">&gt;</div> 
      </div> 
     </ul> 
    </body>

请帮我想出解决办法！ Thankyou ..

来源

2017-03-03 Angela Amarapala

将环路改为for（var i = 0; i <= liItems.length - 1; i ++）{ –

@Velko试过了，但问题仍然存在:( –

如果你减去1的长度，未定义的错误不应该然后自动滚动会停止，因为你到达结束时还没有执行完毕，你还会得到未定义的错误，或滚动停止吗？ –

我们可以在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">&lt;</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">&gt;</div> 
 
    </div> 
 
    </ul> 
 
    </div> 
 
</body>

注：全页面打开片段，您可以了解清楚。

我希望它对你有帮助。

来源

2017-03-06 06:48:11

真棒..这是我想要的..它的作品.. –

我猜你的问题出现了，因为第一次迭代将元素移动到右侧，但不会重复自己，因为左侧没有元素。

您可以尝试创建一个函数，它会将所有元素都移回到elements.lenth循环迭代中的原始位置，因为您还将向最后一个元素显示动画。

来源

2017-03-06 05:15:19 Sagar

无法自动滚动JavaScript滑块

回答

相关问题