Home > Article > Web Front-end > Example sharing of js seamless scrolling

Example sharing of js seamless scrolling

小云云Original: 2018-03-14 16:38:511143browse

This article mainly shares with you examples of js seamless scrolling, hoping to help everyone. Effect principle: let ul keep scrolling to the left, copy li, change the width of ul, judge whether it is out of bounds, and if so, reposition. Control left or right, set a speed, and change the positive or negative value of it.

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>无缝轮播</title>
        <style>
            *{margin: 0;padding: 0;}
            #p1{width: 800px;height: 150px;margin: 100px auto;position: relative;background: blue;overflow: hidden;}
            #p1 ul{position: absolute;top: 0;left: 0;}
            #p1 ul li{list-style-type: none;float: left;width: 200px;height: 150px;;}
            img{width: 200px;height: 150px;}
        </style>
        <script>
            window.onload=function(){
                //控制向左向右，主要是通过是加还是减speed
                var speed=-2;                function move(){
                        if(oUl.offsetLeft<-oUl.offsetWidth/2){                            //当其往左移动了四个li的宽度时，把整个图片拉回来
                            oUl.style.left=0;
                        }                        if(oUl.offsetLeft>0){                            //记得末尾加px
                            oUl.style.left=-oUl.offsetWidth/2+&#39;px&#39;;
                        }
                        oUl.style.left=oUl.offsetLeft+speed+&#39;px&#39;;
                };                var time=null;                var op = document.getElementById(&#39;p1&#39;);                var oUl = op.getElementsByTagName(&#39;ul&#39;)[0];                var oLi = op.getElementsByTagName(&#39;li&#39;);                //使其形成8个li
                oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;
                oUl.style.width = oLi[0].offsetWidth*oLi.length+&#39;px&#39;;

                time = setInterval(move,30);
                op.onmouseover= function(){
                    clearInterval(time);
                }
                op.onmouseout= function(){
                    time = setInterval(move,30);
                }                var oBtn = document.getElementsByTagName(&#39;button&#39;);
                oBtn[0].onclick = function(){
                    speed = -2;
                }
                oBtn[1].onclick = function(){
                    speed = 2;
                }
            }        </script>
    </head>
    <body>
        <button value="向左走">向左走</button>
        <button value="向右走">向右走</button>
        <p id="p1">
            <ul>
                <li><img src="img/1.jpg"></li>
                <li><img src="img/3.jpg"></li>
                <li><img src="img/4.jpg"></li>
                <li><img src="img/2.jpg"></li>
            </ul>
        </p>

    </body></html>

Related recommendations:

JS Seamless Scroll

Comprehensive understanding of JS seamless scrolling code_javascript skills

How to achieve seamless scrolling of text lists in js?

The above is the detailed content of Example sharing of js seamless scrolling. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to bind events to dynamically generated tags in jqueryNext article：How to bind events to dynamically generated tags in jquery

See more

Example sharing of js seamless scrolling

Related articles