Heim > Artikel > Web-Frontend > Beispiel für die gemeinsame Nutzung von js nahtlosem Scrollen

Beispiel für die gemeinsame Nutzung von js nahtlosem Scrollen

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

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So binden Sie Ereignisse an dynamisch generierte Tags in JQueryNächster Artikel：So binden Sie Ereignisse an dynamisch generierte Tags in JQuery

In Verbindung stehende Artikel

Mehr sehen