Natives JS zur Implementierung eines atmenden Karussells

Heute zeige ich Ihnen ein mit nativem JS implementiertes atmendes Karussell. Der Effekt ist wie folgt:

Nachfolgend sehen Sie die Codeimplementierung. Sie können sie gerne kopieren und einfügen.

<!DOCTYPE html>
<html>
 
<Kopf>
    <meta charset="utf-8" />
    <title>Natives JS zur Implementierung eines atmenden Karussells</title>
    <Stil>
        ul {
            Rand: 0;
            Polsterung links: 0;
        }
 
        li {
            Listenstil: keiner;
        }
 
        img {
            Rand: keiner;
        }
 
        #hauptsächlich {
            Breite: 280px;
            Höhe: 330px;
            Überlauf: versteckt;
            Position: relativ;
            Rand: 20px auto 0 auto;
        }
 
        #Hauptul {
            Position: absolut;
            links: 0;
        }
 
        #haupt ul li {
            Breite: 280px;
            Höhe: 330px;
            schweben: links;
            Position: absolut;
            Filter: Alpha (Deckkraft = 0);
            Deckkraft: 0;
        }
 
        #btn {
            Zeilenhöhe: 14px;
            Textausrichtung: zentriert;
            Hintergrund: #eeeeee;
            Breite: 280px;
            Rand: 10px auto 0 auto;
            Anzeige: Flex;
            Flex-Richtung: Reihe;
            Inhalt ausrichten: Abstand herum;
            Elemente ausrichten: zentrieren;
        }
 
        #btn ein {
            Anzeige: Inline-Block;
            Breite: 14px;
            Höhe: 14px;
            Textdekoration: keine;
            Zeilenhöhe: 12px;
            Textausrichtung: zentriert;
            Rahmenradius: 7px;
        }
 
        #btn a.index {
            Hintergrundfarbe: #ccc;
        }
 
        #btn a.aktiv {
            Hintergrundfarbe: rot;
        }
    </Stil>
    <script type="text/javascript" src="js/move.js"></script>
    <Skript>
        fenster.onload = Funktion () {
            var oMain = document.getElementById('main');
            var oUl = oMain.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
 
            var oBtn = document.getElementById('btn');
            var aA = oBtn.getElementsByTagName('a');
 
            var iNow = 1;
            var iNow2 = 1;
            var bBtn = true;
            varnum = 3;
            var Timer = null;
 
            oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';
 
            aA[0].onclick = Funktion () {
                wenn (bBtn) {
                    Intervall löschen(Timer);
                    Timer = Intervall festlegen (AutoPlay, 3000);
                    für (var i = 0; i < aLi.length; i++) {
                        aLi[i].style.position = "relativ";
                        aLi[i].style.filter = 'Alpha(Deckkraft=100)';
                        aLi[i].style.opacity = 1;
                    }
                    oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
                    wenn (iNow == 1) {
                        iNow = aLi.Länge;
                        aLi[aLi.Länge - 1].style.position = "relativ";
                        aLi[aLi.Länge - 1].Stil.links = -aLi.Länge * aLi[0].OffsetWidth + 'px';
                    } anders {
                        ichJetzt--;
                    }
                    iNow2--;
                    zuAusführen();
                    bBtn = falsch;
                }
            };
            aA[aA.Länge - 1].onclick = Funktion () {
                wenn (bBtn) {
                    Intervall löschen(Timer);
                    Timer = Intervall festlegen (AutoPlay, 3000);
                    für (var i = 0; i < aLi.length; i++) {
                        aLi[i].style.position = "relativ";
                        aLi[i].style.filter = 'Alpha(Deckkraft=100)';
                        aLi[i].style.opacity = 1;
                    }
                    oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
                    wenn (iNow == aLi.length) {
                        iJetzt = 1;
                        aLi[0].style.position = "relativ";
                        aLi[0].style.left = aLi.length * aLi[0].offsetWidth + 'px';
                    } anders {
                        iJetzt++;
                    }
                    iNow2++;
                    zuAusführen();
                    bBtn = falsch;
                }
            };
 
            für (var i = 1; i < aA.Länge - 1; i++) {
                aA[i].index = i;
                aA[i].onclick = Funktion () {
                    Intervall löschen(Timer);
                    Timer = Intervall festlegen (AutoPlay, 3000);
                    iNow = dieser.index;
                    iNow2 = dieser.index;
                    zuAnzeigen();
                };
            };
 
            Funktion toRun() {
                für (var i = 1; i < aA.Länge - 1; i++) {
                    aA[i].Klassenname = "Index";
                }
                aA[iNow].className = "aktiv";
 
                startMove(oUl, { links: -(iNow2 - 1) * aLi[0].offsetWidth }, Funktion () {
                    wenn (iNow == 1) {
                        aLi[0].style.position = "relativ";
                        aLi[0].style.left = 0;
                        oUl.style.left = 0;
                        iJetzt2 = 1;
                    } sonst wenn (iNow == aLi.length) {
                        aLi[aLi.Länge - 1].style.position = "relativ";
                        aLi[aLi.Länge - 1].Stil.links = 0;
                        oUl.style.left = -(aLi.length - 1) * aLi[0].offsetWidth + 'px';
                        iNow2 = aLi.Länge;
                    }
 
                    für (var i = 0; i < aLi.length; i++) {
                        aLi[i].style.position = 'absolut';
                        aLi[i].style.filter = 'Alpha(Deckkraft=0)';
                        aLi[i].style.opacity = 0;
                    }
                    oUl.style.left = 0;
                    aLi[iNow2 - 1].style.zIndex = num++;
                    aLi[iNow2 - 1].style.filter = 'Alpha(Deckkraft=100)';
                    aLi[iNow2 - 1].style.opacity = 1;
 
                    bBtn = wahr;
                });
            };
 
            Funktion toShow() {
                für (var i = 1; i < aA.Länge - 1; i++) {
                    aA[i].Klassenname = "Index";
                }
                für (var i = 0; i < aLi.length; i++) {
                    startMove(aLi[i], { Deckkraft: 0 });
                }
                aA[iNow].className = "aktiv";
                startMove(aLi[iNow - 1], { Deckkraft: 100 }, Funktion () {
                    aLi[iNow - 1].style.zIndex = num++;
 
                });
            }
 
            Timer = Intervall festlegen (AutoPlay, 3000);
 
            Funktion autoPlay() {
                wenn (iNow == aLi.length) {
                    iJetzt = 1;
                    iJetzt2 = 1;
                } anders {
                    iJetzt++;
                    iNow2++;
                }
 
                zuAnzeigen();
            }
        };
    </Skript>
</Kopf>
 
<Text>
    <div id="Haupt">
        <ul>
            <li style="z-index:2; filter:alpha(opacity=100); opacity:1;">
                <ein>
                    <img src="bilder/0.jpg" />
                </a>
            </li>
            <li>
                <ein>
                    <img src="bilder/1.jpg" />
                </a>
            </li>
            <li>
                <ein>
                    <img src="bilder/2.jpg" />
                </a>
            </li>
            <li>
                <ein>
                    <img src="bilder/3.jpg" />
                </a>
            </li>
        </ul>
    </div>
    <div id="btn">
        <a class="prev" href="javascript:;">
            <a class="active" href="javascript:;">
        </a>
        <a class="index" href="javascript:;"></a>
        <a class="index" href="javascript:;"></a>
        <a class="index" href="javascript:;"></a>
        <a Klasse = "nächste" href = "javascript:;">></a>
    </div>
</body>
 
</html>

Nachfolgend sehen Sie den Code der wichtigsten Bewegungsfunktion move.js, die im obigen Code eingeführt wurde:

Funktion startMove(obj, json, fnEnd) {
    Intervall löschen(Objekt.Timer);
    obj.timer = setzeIntervall(Funktion () {
        doMove(obj, json, fnEnd);
    }, 30);
}
Funktion doMove(obj, json, fnEnd) {
    var iCur = 0;
    var attr = null;
    var bStop = true;
    für (Attr in JSON) {
        wenn (attr == 'Deckkraft') {
            wenn (parseInt(100 * getStyle(obj, attr)) == 0) {
                iCur = parseInt(100 * getStyle(obj, attr));
            } anders {
                iCur = parseInt(100 * getStyle(obj, attr)) || 100;
            }
        } anders {
            iCur = parseInt(getStyle(obj, attr)) || 0;
        }
        var iSpeed = (json[attr] – iCur)/5;
        iSpeed = (iSpeed > 0) ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        wenn (json[attr] != iCur) {
            bStop = falsch;
        }
        wenn (attr == 'Deckkraft') {
            obj.style.filter = 'Alpha(Deckkraft=' + (iCur + iSpeed) + ')';
            obj.style.opacity = (iCur + iSpeed) / 100;
        } anders {
            obj.style[attr] = iCur + iSpeed + 'px';
        }
    }
    wenn (bStop) {
        Intervall löschen(Objekt.Timer);
        wenn (fnEnde) {
            fnEnd.call(obj);
        }
    }
}
Funktion stopMove(obj) {
    Intervall löschen(Objekt.Timer);
}
Funktion getStyle(Objekt, Attribut) {
    wenn (obj.aktuellerStil) {
        returniere obj.currentStyle[attr];
    } anders {
        gibt getComputedStyle(obj)[attr] zurück;
    }
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: