Wie kann man mit einfachem JS-Code den Scroll-Effekt des Karussells erzielen?-js-Tutorial-php.cn

Wie kann man mit einfachem JS-Code den Scroll-Effekt des Karussells erzielen?

藏色散人

Freigeben： 2018-08-09 16:26:23

Original

4206 Leute haben es durchsucht

Die Karussellanzeige auf der Homepage ist grundsätzlich unerlässlich. Daher kann es für Anfänger etwas schwierig sein, Original-JS zu verwenden. Tatsächlich besteht kein Grund, sich das Scrollen von Bildern als kompliziert vorzustellen. Das Implementierungsprinzip von js carousel image kann hauptsächlich darin verstanden werden, Bilder gleicher Größe in einer Spalte zusammenzuführen, aber nur eines der Bilder wird angezeigt und der Rest wird ausgeblendet. Das angezeigte Bild wird durch Ändern des linken Werts geändert. Die Karussellbilder werden automatisch alle paar Sekunden verschoben, um den Effekt zu erzielen, dass Bilder nacheinander abgespielt werden. In Bezug auf die Effekte gibt es Gleiten und allmähliches Hineinschieben. Das Gleitkarussell ist der Effekt, dass Bilder schrittweise von links nach rechts hineingleiten. Ein Karussell Bild ist der Effekt der schrittweisen Anzeige von Bildern basierend auf der Transparenz.

In diesem Artikel erfahren Sie, wie Sie mit js Bildkarussell- und Gleiteffekte erzielen. Ich hoffe, dass er Freunden in Not hilfreich sein wird.

Die spezifischen Codebeispiele für die js-Implementierung von Karussellbildern lauten wie folgt:

    //HTML代码部分
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js实现轮播图原理及示例</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <!--从左向右滑动-->
        <nav>
            <ul id="index">
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul id="img">
                <li><img src="img1.jpg" alt="img1"></li>
                <li><img src="img2.jpg" alt="img2"></li>
                <li><img src="img3.jpg" alt="img3"></li>
                <li><img src="img4.jpg" alt="img4"></li>
                <li><img src="img5.jpg" alt="img5"></li>
            </ul>
        </nav>
    <script src="script.js"></script>
    </body>
    </html>

Nach dem Login kopieren

//css代码部分
*{        margin:0;        padding:0;
    }    nav{        width: 720px;        height: 405px;        margin:20px auto;        overflow: hidden;        position: relative;
    }    #index{        position: absolute;        left:320px;        bottom: 20px;
    
    }    #index li{        width:8px;        height: 8px;        border: solid 1px gray;        border-radius: 100%;        background-color: #eee;        display: inline-block;
    }    #img{        width: 3600px;/*不给宽高无法移动*/
        height: 405px;        position: absolute;/*不定义absolute，js无法设置left和top*/
        z-index: -1;
    }    #img li{        width: 720px;        height: 405px;        float: left;
    }    #index .on{        background-color: black;
    }

Nach dem Login kopieren

//js代码部分
function moveElement(ele,x_final,y_final,interval){//ele为元素对象
        var x_pos=ele.offsetLeft;        var y_pos=ele.offsetTop;        var dist=0;        if(ele.movement){//防止悬停
            clearTimeout(ele.movement);
        }        if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
            return;
        }
        dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
        x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
        
        dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
        y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
        
        ele.style.left=x_pos+&#39;px&#39;;
        ele.style.top=y_pos+&#39;px&#39;;
        
        ele.movement=setTimeout(function(){//分10次移动，自调用10次
            moveElement(ele,x_final,y_final,interval);
        },interval)
    }

Nach dem Login kopieren

Hinweis:

Die Bildbewegungsfunktion moveElement( ) muss die aktuelle Position des Bildes und die Zielposition ermitteln und die Differenz zwischen ihnen berechnen, um sie zu verschieben. Sie können offsetLeft und offsetTop verwenden, um die aktuelle Position des Bildes zu ermitteln. Der Effekt des „Überstreichens“ des Bildes beim Verschieben besteht darin, dass die Entfernung für die Bewegung in 10 Teile geteilt wird, d .

[Empfohlene verwandte Artikel]

Detaillierte Beispiele für JQuery zur Erzielung des linken und rechten Karusselleffekts

CSS3 zur Implementierung des Karusselleffekts

Karussellbilder einfach mit JS implementieren

Zwei Möglichkeiten, Karussellbilder mit JS zu implementieren

Das obige ist der detaillierte Inhalt vonWie kann man mit einfachem JS-Code den Scroll-Effekt des Karussells erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!