Maison > Article > interface Web > Exemple de partage de défilement transparent js

Exemple de partage de défilement transparent js

小云云original: 2018-03-14 16:38:511142parcourir

Cet article partage principalement avec vous des exemples de défilement transparent js, dans l'espoir d'aider tout le monde. Principe de l'effet : laissez ul continuer à défiler vers la gauche, copiez li, modifiez la largeur de ul et jugez s'il est hors limites, repositionnez-le. Contrôlez à gauche ou à droite, définissez une vitesse et modifiez sa valeur positive ou négative.

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

Recommandations associées :

Défilement transparent JS

Comprendre parfaitement le code de défilement transparent JS_javascript Conseils

Comment obtenir un défilement transparent des listes de textes en js ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment lier des événements à des balises générées dynamiquement dans jqueryArticle suivant：Comment lier des événements à des balises générées dynamiquement dans jquery

Articles Liés

Voir plus