JavaScript zum Erzielen eines Taobao-Produktbild-Umschalteffekts

JavaScript-Umschalteffekt für Bekleidungsalben (ähnlich wie beim Umschalten von Taobao-Produktbildern). Zu Ihrer Information: Der spezifische Inhalt ist wie folgt

Kommen wir ohne weitere Umschweife direkt zum Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <style type="text/css">
        #großesBild{
            Breite: 200px;
        }
        *{
            Polsterung: 0;
            Rand: 0;
        }
        ul{
            Listenstil: keiner;
            /*Überlauf: versteckt;*/
        }
        ul li{
            schweben: links;
            Breite: 46px;
            Höhe: 46px;
            Rand links: 10px;
            Rand oben: 20px;
            Rand: 2px durchgezogen #ffffff;
        }
        ul .aktiv{
            Rahmenfarbe: rot;
        }
    </Stil>
</Kopf>
<Text>
    <img src="img/cloth_01.jpg" id="bigImg">
    <ul>
        <li Klasse="aktiv">
            <a href="">
                <img src="img/cloth_01.jpg" width=46 class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/cloth_02.jpg" width=46 class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/cloth_03.jpg" width=46 class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/cloth_04.jpg" width=46 class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/cloth_05.jpg" width=46 class="smallImg">
            </a>
        </li>
    </ul>
    
    <!--JS-Teil-->
    <Skripttyp="text/javascript">
        // 1. Holen Sie sich die Ereignisquelle var bigImg = document.getElementById("bigImg");
        var smallImgs = document.getElementsByClassName("smallImg");

        für (var i=0;i<smallImgs.length;i++){
            // 2. Durchlaufe die Sammlung und füge jedem img-Tag ein Ereignis hinzu smallImgs[i].onmouseover = function (){

                // 3. Ereignishandler // 3.1 Bevor Sie mit der Maus über jedes li-Tag fahren, setzen Sie die Klassennamen aller li-Tags auf leere Werte für (var j=0;j<smallImgs.length;j++){
                    smallImgs[j].parentNode.parentNode.setAttribute("Klasse","");
                }

                // 3.2 Ändern Sie den src-Attributwert des großen Bildes var smallImgSrc = this.getAttribute("src");
                bigImg.setAttribute("src",smallImgSrc);
                // 3.3 Fügen Sie dem übergeordneten Tag des img-Tags, über dem die Maus schwebt, eine Klasse hinzu: this.parentNode.parentNode.setAttribute("class","active");

            }
        }
    </Skript>
</body>
</html>

Implementierungs-Effekt-Diagramm:

Standardmäßig ist das erste Bild ausgewählt (das große Bild ist standardmäßig das erste). Wenn die Maus über das entsprechende Bild fährt, wechselt das große Bild zu diesem Bild.

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:

Videojs+Swiper realisiert Taobao-Produktdetailkarussell
Javascript zur Realisierung einer Produktbildlupe
JavaScript implementiert Produktdetails der E-Commerce-Plattform

<<: So beheben Sie den Fehler beim Herstellen einer Verbindung zu MySQL unter Linux: Zugriff für Benutzer „root“@„localhost“ verweigert (mit Kennwort: JA)

>>: So verwenden Sie Docker Compose zum Implementieren des Nginx-Lastausgleichs

Eine Frage zur Einstellung des Randradius-Werts

JavaScript zum Erzielen eines Taobao-Produktbild-Umschalteffekts

Eine Frage zur Einstellung des Randradius-Werts

So verwenden Sie video.js in Vue zum Abspielen von Videos im M3U8-Format

Mit JS einen rotierenden Weihnachtsbaum in HTML implementieren

So installieren Sie den Chrome-Browser auf CentOS 7

Lösung zum automatischen Neustart von MySQL

MySQL-Grundlagen-Tutorial Teil 1 MySQL5.7.18 Installations- und Verbindungs-Tutorial

Detaillierte Anwendungsfälle von MySql Escape

So installieren Sie ELK in Docker und implementieren die Protokollanalyse im JSON-Format

Die automatische Inkrementierung der Primärschlüssel-ID von MySQL wird auf diese Weise nicht verarbeitet

Zen-Codierung für Editplus – Beispielcodebeschreibung

Artikel empfehlen

Methode zur Realisierung einer automatisierten Bereitstellung basierend auf Docker + Jenkins

So implementieren Sie eine einzelne Dateikomponente in JS

Eine kurze Diskussion über den CSS-Kaskadierungsmechanismus

Erläutern Sie die Bereitstellung und Konfiguration des Clickhouse Docker-Clusters anhand von Beispielen.

Mehrere Möglichkeiten, das gepunktete Kästchen zu entfernen, das beim Klicken auf einen Link angezeigt wird

Unterschiede zwischen den Windows Server-Systemversionen win2003, win2008R2, win2012, win2016 und win2019

Detaillierte Erklärung zum Erstellen gespeicherter Prozeduren und Funktionen in MySQL

Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags

Detaillierte Erläuterung des Docker-Datensicherungs- und Wiederherstellungsprozesses

Analyse des Consul-Konfigurationsprozesses für die Docker-Bereitstellung

Detaillierte Erläuterung der Vue-Projektoptimierung und -verpackung

Beispielcode zur Realisierung eines Buchseitenumblättereffekts mit CSS3

Lösung für Primärschlüsselkonflikte, wenn innodb_index_stats beim Importieren von Sicherungsdaten einen Fehler meldet

Detaillierte Erklärung der Unterschiede zwischen JS-Arrays „Finden“, „Some“, „Filtern“ und „Reduzieren“

Einfache Schritte zur Implementierung der Autorisierung eines öffentlichen H5 WeChat-Kontos