2017-03-03 74 views
1

我想創建一個純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 ..

+0

將環路改爲for(var i = 0; i <= liItems.length - 1; i ++){ –

+0

@Velko試過了,但問題仍然存在:( –

+0

如果你減去1的長度,未定義的錯誤不應該然後自動滾動會停止,因爲你到達結束時還沒有執行完畢,你還會得到未定義的錯誤,或滾動停止嗎? –

回答

2

我們可以在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>

注: 全頁面打開片段,您可以瞭解清楚。

我希望它對你有幫助。

+0

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

1

我猜你的問題出現了,因爲第一次迭代將元素移動到右側,但不會重複自己,因爲左側沒有元素。

您可以嘗試創建一個函數,它會將所有元素都移回到elements.lenth循環迭代中的原始位置,因爲您還將向最後一個元素顯示動畫。