Beispiel für die gemeinsame Nutzung von js nahtlosem Scrollen-js-Tutorial-php.cn

Beispiel für die gemeinsame Nutzung von js nahtlosem Scrollen

小云云

Freigeben： 2018-03-14 16:38:51

Original

1177 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich Beispiele für nahtloses Scrollen in js vorgestellt, in der Hoffnung, allen zu helfen. Wirkungsprinzip: Lassen Sie ul weiter nach links scrollen, kopieren Sie li, ändern Sie die Breite von ul, beurteilen Sie, ob es außerhalb der Grenzen liegt, und positionieren Sie es gegebenenfalls neu. Steuern Sie nach links oder rechts, stellen Sie eine Geschwindigkeit ein und ändern Sie deren positiven oder negativen Wert.

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

Nach dem Login kopieren

Verwandte Empfehlungen:

JS Seamless Scrolling

Verstehen Sie den JS Seamless Scrolling Code vollständig._javascript Tipps

Wie erreicht man ein nahtloses Scrollen von Textlisten in js?

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung von js nahtlosem Scrollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!