无法自动滚动JavaScript滑块

我试图创建一个纯JavaScript滑块，当页面加载时自动滚动。滑块第一次成功触发，问题来了。当此滑块在第二次迭代中通过

setInterval（）

函数时，列表项将未定义（即：值“i”）。我还希望滑块自动滚动。我需要借助纯JavaScript来完成这项工作。这是我的密码

JS:

HTML:

---

请帮我弄清楚！谢谢。

我猜，当第一次迭代将元素向右移动时，会出现问题，但随后不会重复，因为左侧没有元素

---

您可以尝试创建一个函数，将所有元素移回

元素处的原始位置。lenth

循环迭代，因为您也将动画显示到最后一个元素。

我猜想，当第一次迭代将元素向右移动时，问题会出现，但随后不会像原来那样重复左边没有元素

---

您可以尝试创建一个函数，将所有元素移回

元素处的原始位置。lenth

循环迭代，同时将动画显示到最后一个元素。

在

setInterval（）的帮助下，当
img element src
定期更改时，我们可以使其自动向左滑动

代码：

函数滑块（）{
//var ul=document.getElementById（“imageSlider”）；
//var liItems=ul.getElementsByTagName（“li”）；
//var imageWidth=liItems[0]。偏移网络宽度；
//var imageNumber=liItems.length；
setInterval（函数（）{
var souc=document.getElementsByClassName（“图像样式”）；
var firstSrc=souc[0]。src
对于（变量i=0；i

。滑块包装器{
高度：115px；
宽度：100%；
}
.滑套{
高度：95px；
宽度：274px；
背景图像：线性梯度（#aaaaa，#e2e2）；
背景尺寸：自动200%；
背景位置：0.100%；
过渡：背景位置0.5s放松；
-webkit过渡：背景位置0.5s放松；
-moz过渡：背景位置0.5s放松；
-o型过渡：背景位置0.5s放松；
-ms转换：背景位置0.5s放松；
显示：内联块；
垂直对齐：中间对齐；
利润率：10px；
}
.幻灯片包装器：悬停{
高度：95px；
宽度：274px；
背景位置：0；
}
.幻灯片{
显示：内联块；
位置：相对位置；
}
保险商实验室{
保证金：0；
填充：0；
宽度：100%；
}
.形象{
文本对齐：居中；
高度：95px；
宽度：274px；
线高：92px；
}
1.形象风格{
最大宽度：150px；
宽度：自动；
最大高度：75px；
高度：自动；
垂直对齐：中间对齐；
}
.左箭头{
宽度：75px；
高度：115px；
浮动：左；
位置：相对位置；
字体系列：“Dosis”，无衬线；
字体大小：75px；
}
.右箭头{
宽度：75px；
高度：115px；
浮动：对；
位置：相对位置；
字体系列：“Dosis”，无衬线；
字体大小：75px；
}
.图像滑块ul{
文本对齐：居中；
显示：块；
空白：nowrap；
填充：0；
}
.货柜中部{
显示：内联块；
高度：115px；
溢出：隐藏；
宽度：1188px；
}

在

setInterval（）

的帮助下，当定期更改

img元素src

时，我们可以使其自动向左滑动

代码：

函数滑块（）{
//var ul=document.getElementById（“imageSlider”）；
//var liItems=ul.getElementsByTagName（“li”）；
//var imageWidth=liItems[0]。偏移网络宽度；
//var imageNumber=liItems.length；
setInterval（函数（）{
var souc=document.getElementsByClassName（“图像样式”）；
var firstSrc=souc[0]。src
对于（变量i=0；i

。滑块包装器{
高度：115px；
宽度：100%；
}
.滑套{
高度：95px；
宽度：274px；
背景图像：线性梯度（#aaaaa，#e2e2）；
背景尺寸：自动200%；
背景位置：0.100%；
过渡：背景位置0.5s放松；
-webkit过渡：背景位置0.5s放松；
-moz过渡：背景位置0.5s放松；
-o型过渡：背景位置0.5s放松；
-ms过渡：背景位置
    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);
    } 

    .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()">
        <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>