Heim > Artikel > Web-Frontend > So erzielen Sie einen Karusselleffekt in js

So erzielen Sie einen Karusselleffekt in js

零到壹度Original: 2018-04-12 16:03:011890Durchsuche

Der Inhalt dieses Artikels besteht darin, Ihnen mitzuteilen, wie Sie den Karusselleffekt in js erzielen können. Er hat einen gewissen Referenzwert.

Es gibt In vielen Beispielen im Internet besteht das nahtlose Scrollen, das ich hier durchgeführt habe, darin, das Bild nach links und rechts scrollen zu lassen, indem der linke Wert des Elements geändert wird.
Werfen wir zunächst einen Blick auf den Strukturstil von p+css:
So erzielen Sie einen Karusselleffekt in js
p+css-Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{         
                   margin: 0;                
                   padding: 0;            
              }
            ul,ol{       
                   list-style: none;            
              }
            /*消除图片底部3像素距离*/
            img{         
                   vertical-align: top;           
                }
            .scroll{         
                   width: 500px;               
                   height: 200px;               
                   margin: 100px auto;                
                   border: 1px solid #ccc;                
                   padding: 7px;                
                   overflow: hidden;                
                   position: relative;            
             }
            .box{         
                   width: 500px;                
                   height: 200px;                
                   overflow: hidden;                
                   position: relative;            
             }
            .box ul{          
                  width: 600%;                
                  position: absolute;                
                  left: 0;                
                  top: 0;            
             }
            .box ul li{         
                   float: left;            
            }
            .scroll ol{       
                     position: absolute;                
                     right: 10px;                
                     bottom: 10px;            
            }
            .scroll ol li{         
                   float: left;                
                   width: 20px;                
                   height: 20px;                
                   background: pink;                
                   text-align: center;                
                   line-height: 20px;                
                   border-radius: 50%;                
                   background-color: pink;             
                margin-left:10px ;                
                cursor: pointer;            }
            .scroll ol li.current{        
                    background-color: purple;            }
        </style>
    </head>
    <body>
        <p id="scroll" class="scroll">
            <p id="box" class="box">
                <ul id="ul">
                    <li><img  src="images/1.jpg"    style="max-width:90%"  style="max-width:90%" alt="So erzielen Sie einen Karusselleffekt in js" ></li>
                    <li><img  src="images/2.jpg"    style="max-width:90%"  style="max-width:90%" alt="So erzielen Sie einen Karusselleffekt in js" ></li>
                    <li><img  src="images/3.jpg"    style="max-width:90%"  style="max-width:90%" alt="So erzielen Sie einen Karusselleffekt in js" ></li>
                    <li><img  src="images/4.jpg"    style="max-width:90%"  style="max-width:90%" alt="So erzielen Sie einen Karusselleffekt in js" ></li>
                    <li><img  src="images/5.jpg"    style="max-width:90%"  style="max-width:90%" alt="So erzielen Sie einen Karusselleffekt in js" ></li>
                </ul>
                <ol id="ol">
                    <li class="current">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ol>
            </p>
        </p>
    </body></html>

Der Anzeigeeffekt ist wie in der Abbildung dargestellt:
So erzielen Sie einen Karusselleffekt in js
Als nächstes müssen wir den js-Code hinzufügen
Zuvor müssen wir verstehen, dass die kleinen Punkte 1 2 3 nicht fest codiert sind ul li, also müssen wir zuerst p hinzufügen. Entfernen Sie den Code in ol li
Um ein nahtloses Scrollen zu erreichen, benötigen Sie ein weiteres Bild, das heißt, das erste Bild klonen und am Ende einfügen. Zu diesem Zeitpunkt wird das CSS-Layout beibehalten und nur noch p übrig:

<body>
        <p id="scroll" class="scroll">
            <p id="box" class="box">
                <ul id="ul">
                    <li><img  src="images/1.jpg"    style="max-width:90%"  style="max-width:90%" alt="So erzielen Sie einen Karusselleffekt in js" ></li>
                    <li><img  src="images/2.jpg"    style="max-width:90%"  style="max-width:90%" alt="So erzielen Sie einen Karusselleffekt in js" ></li>
                    <li><img  src="images/3.jpg"    style="max-width:90%"  style="max-width:90%" alt="So erzielen Sie einen Karusselleffekt in js" ></li>
                    <li><img  src="images/4.jpg"    style="max-width:90%"  style="max-width:90%" alt="So erzielen Sie einen Karusselleffekt in js" ></li>
                    <li><img  src="images/5.jpg"    style="max-width:90%"  style="max-width:90%" alt="So erzielen Sie einen Karusselleffekt in js" ></li>
                </ul>               
            </p>
        </p>
    </body>

Zu diesem Zeitpunkt verwenden wir js-Code, um kleine Punkte zu generieren

var scroll = document.getElementById("scroll"); // 获得大盒子
        var ul = document.getElementById("ul"); // 获得ul
        var ulLis = ul.children;// 获得ul的盒子 以此来生成ol中li的个数
        var liWidth = ul.children[0].offsetWidth;// 获得每个li的宽度
        // 操作元素
        // 因为要做无缝滚动，所以要克隆第一张，放到最后一张后面
        // 1. 克隆元素
        ul.appendChild(ul.children[0].cloneNode(true));        // 2.创建ol 和li
        vaar ol = document.createElement("ol");//创建ol元素
        scroll.appendChild(ol);// 把ol放到scroll盒子里面去
        for (var i=0;i<ulLis.length-1;i++) {            var li = document.createElement("li");// 创建li元素
            li.innerHTML = i + 1;// 给li里面添加文字  1 2 3 4 5
            ol.appendChild(li);// 将li元素添加到ol里面
        }
        ol.children[0].className = "current";// ol中的第一个li背景色为purple

Zu diesem Zeitpunkt Das Ol-Li-Element, also der kleine Punkt, wird erstellt. Danach verwenden wir js zum Animieren.
Der Animationsteil umfasst:
1 angezeigt und die Farbe der kleinen Punkte ändert sich ebenfalls.
2. Bilder automatisch drehen (dies erfordert einen Timer)
3 Löschen des Timers)
4. Wenn die Maus das Bild verlässt, dreht sich das Bild automatisch weiter (Timer neu starten). Gerät)
Hier kapseln wir eine animate()-Animationsfunktion

// 动画函数 第一个参数，代表谁动  第二个参数 动多少
        // 让图片做匀速运动，匀速动画的原理是 当前的位置 + 速度  即 offsetLeft + speed

        function animate(obj,target){
            // 首先清除掉定时器
            clearInterval(obj.timer);            // 用来判断 是+ 还是 -  即说明向左走还是向右走
            var speed = obj.offsetLeft < target ? 15 : -15;
            obj.timer = setInterval(function(){
                var result = target - obj.offsetLeft;//它们的差值不会超过speed
                obj.style.left = obj.offsetLeft + speed + "px";                // 有可能有小数的存在，所以在这里要做个判断             
                if (Math.abs(result) <= Math.abs(speed)) {
                    clearInterval(obj.timer);
                    obj.style.left = target + "px";
                }
            },10);
        }

Timer-Funktion

var timer = null; // 轮播图的定时器
        var key = 0;// 控制播放的张数
        var circle = 0;// 控制小圆点

        timer = setInterval(autoplay,1000);// 自动轮播
        function autoplay(){
            /*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1,
            就要重头开始播放.  因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/
            key++; // 先++
            if(key > ulLis.length-1){// 后判断

                ul.style.left = 0; // 迅速调回
                key = 1; // 因为第6张是第一张，所以播放的时候是从第2张开始播放
            }            // 动画部分
            animate(ul,-key*liWidth);            // 小圆点circle   当显示第几张图片是，对应的小圆点的颜色也发生变化 

            /*同理,对小圆点也要有一个判断*/
            circle++;            if (circle > olLis.length-1) {
                circle = 0;
            }            // 小圆点颜色发生变化
            for (var i = 0 ; i < olLis.length;i++) {                // 先清除掉所用的小圆点类名
                olLis[i].className = ""; 
            }            // 给当前的小圆点 添加一个类名
            olLis[circle].className = "current";

        }

Okay, hier zeigen wir den Hauptcode, den spezifischen Code, überprüfen Sie, ob Sie js hier herunterladen können, um einen Karusselleffekt zu erzielen

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Karusselleffekt in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css 封装 JS ul li

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 fügen Sie tr zur Tabelle in AngularJS hinzuNächster Artikel：So fügen Sie tr zur Tabelle in AngularJS hinzu

In Verbindung stehende Artikel

Mehr sehen