Question

我正在尝试创建一个纯JavaScript滑块，它会在页面加载时自动滚动。滑块第一次成功触发，问题就出现了。当此滑块通过setInterval()函数进行第二次迭代时，列表项未定义（即：＆＃39; i＆＃39; 的值）。我还想让滑块自动滚动。我需要在纯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>

请帮我解决这个问题！三江源..

Answer 1

我们可以在img element src的帮助下定期更改setInterval()时自动左滑动。

<强>码

＆＃13;

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);
  }

＆＃13;

.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;
    }

＆＃13;

<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>

＆＃13;

注意：打开整页摘要，你可以清楚地理解。

我希望它对你有所帮助。

Answer 2

我猜你的问题出现了，因为第一次迭代将元素向右移动但后来没有重复，因为左边没有元素。

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

无法自动滚动JavaScript滑块

2 个答案: