无法自动滚动JavaScript滑块

Question

I am trying to create a pure JavaScript slider which automatically scrolls as the page loads. 我正在尝试创建一个纯JavaScript滑块，该滑块会在页面加载时自动滚动。 The slider gets successfully triggered for the first time and here comes the issue. 滑块首次成功触发，这就是问题所在。 When this slider goes through setInterval() function for the second iteration, the list items gets undefined (ie: the value of 'i' ). 当此滑块通过setInterval()函数进行第二次迭代时，列表项将变得不确定（即'i'的值 ）。 Also I want the slider to autoscroll. 我也希望滑块自动滚动。 I need this to get done with the help of pure JavaScript . 我需要借助纯JavaScript完成此操作。 Here is my code, 这是我的代码，

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

Please help me figure this out! 请帮我弄清楚！ Thankyou.. 谢谢..

Answer 1

we could make it automatic left sliding when periodical change of img element src with help of setInterval() . 我们可以在setInterval()帮助下，在img element src进行定期更改时使其自动向左滑动。

code: 码：

 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>

Note: open snippet in full page, you can understand clearly. 注意：全页打开摘要，您可以清楚地了解。

l hope it helps to you. 我希望它对您有帮助。

Answer 2

I am guessing that your problem arises as the first iteration moves elements to right but then does not repeat themselves as there are no elements to the left. 我猜您的问题是在第一次迭代将元素向右移动时出现的，但由于没有元素向左重复，因此不会重复出现。

You could try to create a function which will move back all elements to the original position at the elements.lenth loop iteration as you'll be showing the animation to the last element as well. 您可以尝试创建一个函数，该函数将所有元素移回到elements.lenth循环的原始位置，同时还将动画显示到最后一个元素。

无法自动滚动JavaScript滑块

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-03-06 06:48:11

解决方案2
1 2017-03-06 05:15:19

无法自动滚动JavaScript滑块

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-03-06 06:48:11

解决方案2 1 2017-03-06 05:15:19

解决方案1
2 已采纳 2017-03-06 06:48:11

解决方案2
1 2017-03-06 05:15:19