jQuery implementiert einen einfachen Karusselleffekt

Hallo zusammen, heute werde ich die Implementierung des Karussells mit Ihnen teilen. Hier ist der Effekt des Karussells, den ich erstellt habe.

Zunächst sehen wir, dass es aus einem Hintergrundbild, einem Richtungssymbol und einem Indikator besteht. Wir haben festgestellt, dass das Hintergrundbild, die Richtungssymbole und die Indikatoren übereinander gestapelt sind, sodass wir beim Layout eine absolute Positionierung verwenden müssen. Wir möchten erreichen, dass beim Klicken auf das Richtungssymbol das Bild entsprechend wechselt, beim Klicken auf den Indikator das Bild entsprechend wechselt, beim Nichtklicken automatisch alle 5 Sekunden abgespielt wird und beim Nichtklicken das Richtungssymbol nicht erscheint.

Strukturelles Layout: Verwenden Sie ein Div, um drei Divs zu umschließen, und die drei Divs darin zeigen jeweils den Hintergrundbildteil, den Richtungssymbolteil und den Anzeigeteil an.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <link rel="stylesheet" href="./css/lunbotu.css" >
</Kopf>
<Text>
<!--Der gesamte Diashow-Bereich-->
<div Klasse="Karussell">
    <!--Bildhintergrund-->
    <div Klasse="Inhalt">
        <ul>
            <li><a href=""><img src=" ./img/dj.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/ali.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/al.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/hml.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/yao.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/xia.jpg" alt=""></a></li>
        </ul>
    </div>
    <!--Symbole zum Verschieben nach links und rechts-->
    <div Klasse="pos">
        <a href="" class=" left"><img src="./img/arrow-left.png" alt=""></a>
        <a href="" class=" right"><img src="./img/arrow-right.png" alt=""></a>
    </div>
    <!--Indikator-->
    <div Klasse="Punkt">
        <ul>
            <li Klasse="aktiv"><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
</div>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/lunbotu.js"></script>
</body>
</html>

Stilcode: Sie können Ihre eigene Lieblingsfarbe und Ihren eigenen Stil entwerfen. Beachten Sie, dass bei der absoluten Positionierung der Grundsatz „Sohn ist gleich Vater“ zu beachten ist. Wenn Sie nur ein Bild auf der Benutzeroberfläche anzeigen möchten, können Sie „overflow: hidden“ verwenden, um den überzähligen Teil auszublenden. Nach der Positionierung können Sie Folgendes festlegen: top: 50 %; transform: translateY(-50 %); vertical center display: none;

/*Entfernen Sie den Stil, der mit dem Tag kommt*/
* {
    Rand: 0;
    Polsterung: 0;
}
 
ul {
    Listenstil: keiner;
}
 
A {
    Textdekoration: keine;
}
 
img {
    Breite: 100 %;
}
/*Legen Sie das Layout des gesamten Karussells fest*/
.Karussell {
    Position: relativ;
    Rand: 40px automatisch;
    Breite: 1000px;
    Höhe: 460px;
    Rand: 1px durchgezogen rgba(0, 0, 0, 0,1);
    Box-Größe: Rahmenbox;
    /*Den überzähligen Teil ausblenden*/
    Überlauf: versteckt;
}
/*Legen Sie das Layout des Hintergrundbildes fest*/
.Inhalt {
    Position: absolut;
    Z-Index: 1;
}
/*Legen Sie das Layout der linken und rechten Symbole und Anzeigen fest*/
.pos,
.punkt {
    Position: absolut;
    Z-Index: 2;
    Breite: 100 %;
}
/*Legen Sie die Symbole für die Bewegung nach links und rechts so fest, dass sie zuerst vertikal zentriert und nicht angezeigt werden*/
.pos {
    oben: 50 %;
    transformieren: verschiebeY(-50%);
    Anzeige: keine;
}
/*Hintergrund der linken und rechten Symbole festlegen*/
.pos > ein {
    Polsterung: 10px 0;
    Rahmenradius: 15px;
    Hintergrund: rgba(0, 0, 0, 0,5);
}
/*Position des Symbols für die linke Bewegung festlegen*/
.links {
    schweben: links;
}
/*Position des rechten Bewegungssymbols festlegen*/
.Rechts {
    schweben: rechts;
}
/*Position der Indikatoranzeige festlegen*/
.punkt {
    unten: 30px;
    Textausrichtung: zentriert;
}
/*Den Indikatorhintergrund festlegen*/
.punkt ul {
    Anzeige: Inline-Block;
    Polsterung: 2px;
    Hintergrund: rgba(0, 0, 0, .2);
    Rahmenradius: 15px;
 
}
/*Größe des Punkts festlegen*/
.punkt > ul > li {
    schweben: links;
    Rand: 5px;
    Breite: 10px;
    Höhe: 10px;
    Randradius: 50 %;
    Hintergrund: weiß;
    Cursor: Zeiger;
}
/*Position des Indikators bei der Anzeige des aktuellen Bildes festlegen*/
.aktiv {
    Hintergrund: rgba(255, 255, 255, .6) !wichtig;
}

JavaScript-Code: Beachten Sie, dass die Bilder am Anfang ausgeblendet sein sollten und standardmäßig das erste Bild angezeigt wird. Andernfalls wird das zweite Bild angezeigt, egal auf welches Bild Sie zuerst klicken. Bei der Anzeige des nächsten Bildes sollten die Markierung des vorherigen Bildes und der Indikator gelöscht werden

$(Funktion () {
    /*Speichere den Index des aktuellen Bildes*/
    lass Index = 0;
    lass btn = false;
    /*Entfernen Sie die Aktualisierungsfunktion von Tag a*/
    $('a[href=""]').prop('href', 'javascript:;');
    /*Zuerst die Bilder ausblenden und standardmäßig das erste Bild anzeigen*/
    $('.content>ul>li').hide();
    $('.content>ul>li:eq(0)').anzeigen();
    // Stellen Sie das Richtungspfeilsymbol so ein, dass es ein- und ausgeblendet wird $('.carousel').hover(function () {
        $('.pos').stop().fadeIn()
    }, Funktion () {
        $('.pos').stop().fadeOut()
    })
    // Klickereignis an Symbol für die linke Richtung binden $('.left').on('click', function () {
        btn = wahr;
        sauber();
        wenn (Index == 0) {
            Index = 5;
        } anders {
            --Index;
        }
        zeigen();
    })
    // Klickereignis an Symbol nach rechts binden $('.right').on('click', function () {
        btn = wahr;
        sauber();
        wenn (Index == 5) {
            Index = 0;
        } anders {
            ++Index;
        }
        zeigen();
    })
    //Anzeigefunktion des Indikators (Klickereignis an den Indikator binden)
    $('.dot li').on('klicken', Funktion () {
        btn = wahr;
        lass jetzt = $(this).index()
        wenn (jetzt != Index) {
            sauber();
            Index = jetzt;
            zeigen();
        }
    })
    //Automatische Abspielfunktion (Timer)
    setzeIntervall(Funktion () {
        wenn (!btn) {
            sauber();
            wenn (Index == 5) {
                Index = 0;
            } anders {
                ++Index;
            }
            zeigen();
        } anders {
            btn = falsch;
        }

    }, 5000)

    //Lösche das vorherige Bild und den Indikator Funktion clean() {
        $(`.content>ul>li:eq(${index})`).stop().fadeOut();
        $(`.dot>ul>li:eq(${index})`).removeClass('aktiv');
    }
    //Neue Bilder und Indikatoren zur Indikatorfunktion show() hinzufügen {
        konsole.log(index);
        $(`.content>ul>li:eq(${index})`).stop().fadeIn();
        Konsole.log($(`.content>ul>li:eq(${index})`))
        $(`.dot>ul>li:eq(${index})`).addClass('aktiv');

    }
})

Ergebnis:

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:

jQuery implementiert Karussellkarte detaillierte Erklärung und Beispielcode
Verwenden von jQuery zum Schreiben von Karusselleffekten für links und rechts
jQuery implementiert nahtloses linkes und rechtes Karussell
jQuery implementiert Karusselldiagramme und deren Prinzip im Detail erklärt
jQuery-Plugin-Folien zum Erzielen nahtloser Karusselleffekte
jQuery implementiert ein nach links und rechts verschiebbares Karussell
Anwendungsbeispiel für das adaptive jQuery-Karussell-Plug-In Swiper
JQuery und HTML+CSS, um ein Karussell mit kleinen Punkten und linken und rechten Schaltflächen zu erstellen
Einfache Karussellfunktion implementiert durch jQuery [für Anfänger geeignet]
Implementierung eines Karussells mit Ein- und Ausblendeffekten auf Basis von jQuery

<<: Detaillierte Installationshistorie von Ubuntu 20.04 LTS

>>: Detaillierte Erklärung langsamer MySQL-Abfragen

Vue integriert einen Rich-Text-Editor, der das Zoomen und Ziehen von Bildern unterstützt

jQuery implementiert einen einfachen Karusselleffekt

Vue integriert einen Rich-Text-Editor, der das Zoomen und Ziehen von Bildern unterstützt

So legen Sie die Speichergröße von Docker Tomcat fest

So installieren Sie Solr 8.6.2 in Docker und konfigurieren den chinesischen Wortsegmentierer

Detaillierte Beispiele für den Unterschied zwischen den Methoden watch und computed in Vue.js

Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)

Eine kurze Diskussion über Makrotasks und Mikrotasks in js

So konfigurieren Sie die maximale Anzahl von Dateien, die von jedem Nginx-Prozess geöffnet werden können

Über die MariaDB-Datenbank unter Linux

Implementierung der MySQL Master-Slave-Statusprüfung

Teilen Sie 20 JavaScript-Einzeilencodes

Artikel empfehlen

Eine detaillierte Diskussion der Auswertungsstrategien in JavaScript

Detaillierte Erläuterung des MySQL Multi-Version Concurrency Control Mechanism (MVCC)-Quellcodes

css Alle Elemente ab dem n-ten abrufen

So sichern und wiederherstellen Sie die MySQL-Datenbank, wenn sie zu groß ist

Hyperlink-Tag für HTML-Webseiten

Detailliertes Tutorial zum Kompilieren und Installieren von MySQL 8.0.20 aus dem Quellcode

MySQL startet langsames SQL und analysiert die Ursachen

So zeigen Sie die Zeitzone in MySQL an und ändern sie

Vue+SSH-Framework zur Realisierung von Online-Chat

Webdesign-Tipps für Formular-Eingabefelder

HTML + CSS realisiert das Scrollen zur Elementposition, um den Ladeanimationseffekt anzuzeigen

Erweiterter Crawler - Verwendung der Scrapy_splash-Komponente für automatisches JS-Rendering

Vue implementiert Funktionen zum Hinzufügen, Löschen und Ändern des lokalen Speichers

Das WeChat-Applet verwendet die Videoplayer-Videokomponente

Grafisches Tutorial zur MySQL8-Installationsversion