Natives JS zur Implementierung eines Bildkarussells. JS zur Implementierung eines kleinen Werbe-Plugins.

Vor kurzem wollte ich natives JS verwenden, um einige weitere kleine Funktionen zu implementieren. Jetzt schreibe ich sie in den Blog. Sie können darauf verweisen. Wenn Sie Fragen haben, weisen Sie bitte darauf hin.

Karussell

brauchen:

Die Bilder werden in einer Schleife rotiert. Zum Umschalten können Sie links oder rechts klicken. Der Umschaltzustand ist an <li> gebunden. Bewegen Sie die Maus in das Bild, um zu schweben, und bewegen Sie die Maus aus dem Bild, um die Rotation fortzusetzen.

<!DOCTYPE html>
 
<html lang="de">
 
<Kopf>
 
    <meta charset="UTF-8">
    <title>Natives js-Karussellbild</title>
 
</Kopf>
 
<Stil>
    .Container{
        Breite: 100 %;
        Höhe: 500px;
        Position: relativ;
    }

    .Inhalt{
        Breite: 900px;
        Höhe: 450px;
        Position: relativ;
        Überlauf: versteckt; 
        Rand: 1px durchgehendes Seegrün; 
        Rand: 0 automatisch;
    }
 
    .slider-img{ 
        Breite: 900px; 
        Höhe: 450px; 
        Rand: 10px automatisch; 
    }
 
    .slider-img img{
        vertikale Ausrichtung: oben;
        Breite: 800px;
        Höhe: 400px;
        Rand: 10px 50px;
        Anzeige: Block;
 
    }
 
    .links{
        Rand oben: -300px;
        Rand links: 50px;
        Breite: 100px;
        Höhe: 100px;
    }
 
    .linkes Bild,.rechtes Bild{
        Breite: 100px;
        Höhe: 100px;
    }
 
    .Rechts{
        Rand oben: -100px;
        Rand rechts: 50px;
        schweben: rechts;
        Breite: 100px;
        Höhe: 100px;
 
    }
 
 
 
    .Punkt{
        Position: relativ;
        oben: 23 %;
        links: 43%;
        Breite: 50%;
    }
 
    .dotul{
        Breite: 450px;
    }

    .dotul li{ 
        Breite: 20px; 
        Höhe: 20px;
        Hintergrundfarbe: seegrün;
        Listenstil: keiner;
        schweben: links;
        Rahmenradius: 20px; 
        Rand links: 15px; 
        Z-Index: 999; 
        Cursor: Zeiger; 
    }
 
    .aktiv{
        Hintergrundfarbe: orangerot !wichtig;
    }
 
 
 
</Stil>
 
<Text>
 
    <div Klasse="Container" id="Container">
 
        <div Klasse="Inhalt" ID="Inhalt">
            <div Klasse="slider-img" id="slider" >
                  <a href="javascript:;" >
                    <img src="./img/88.jpg" alt="" id="img">
                </a>
            </div>
 
        </div>
        <div Klasse="btn">
            <div Klasse="links" id="links">
                <a href=" ###" ><img src=""></a>
            </div>
 
            <div Klasse="richtig" ID="richtig">
                <a href=" ###" ><img src=""></a>
            </div>
        </div>
 
        <div Klasse="Punkt">
            <ul id="ul" Klasse="dotul">
                <li Klasse="aktiv"></li>
                <li></li>
                <li></li>
               <li></li>
            </ul>
        </div>
</div>

js-Code. Denken Sie bei der Verwendung daran, JS in HTML einzuführen.

var Container = document.getElementById("Container"); 
var Inhalt = document.getElementById("Inhalt");
var Schieberegler = document.getElementById("Schieberegler");
var img = document.getElementById("img");
var ul = document.getElementById("ul"); 
var li = document.getElementsByTagName("li"); 
var links = document.getElementById("links"); 
var rechts = document.getElementById("rechts"); 
varnum = 0;
var Timer = null;    
var picList = ["./img/88.jpg","./img/are.jpg","./img/family.jpg","./img/one.jpg"];
// Entspricht li dem Listenindex // Legt die Methode zum Anzeigen von Bildern fest. Bei der Anzeige wird der Punkt von li an das Bild gebunden ShowPicture = function() {
       img.src = Bildliste[Anzahl];
       für(var i = 0 ; i < li.Länge; i++) {
           li[i].Klassenname = '';
       }
       li[num].className = "aktiv";
    }
  
    //Linksklick, wenn es schon das erste Bild ist, zurück zum letzten Bild left.onclick = function() {
        Nummer--;
        wenn(Zahl < 0) {
           num = Bildliste.Länge-1;
        }
        Bild anzeigen();
    }
  

    //Rechtsklick, wenn es das letzte Bild ist, zurück zum ersten Bild right.onclick = function() {
        Zahl++;
        wenn(num >= Bildliste.Länge) { //3
            Zahl = 0;
        }
        Bild anzeigen();
    }
    
     //Klicken Sie auf den Punkt, um zum entsprechenden Bild zu springen, und ordnen Sie die li- und list-Indizes list.index=li.index zu.
   
     für(var i = 0; i < picList.length ; i++) {
         li[i].index = i;
         li[i].onclick = Funktion() {
             num = dieser.index;
             Bild anzeigen();
         }
     }

    //Bilder automatisch drehen. Denken Sie daran, den Timer bei jedem Aufruf zu löschen und ihn nach dem Aufruf zurückzugeben, um zu verhindern, dass der Zeitunterschied immer größer wird autoChange = function() {
        Intervall löschen(Timer);
        Timer = Intervall festlegen(() => {
            Zahl++;
            Num %= Bildliste.Länge;
            Bild anzeigen();
        }, 3000);
        Rückgabetimer;
    }
    window.onload = automatische Änderung;

   
    //Ereignis img.onmouseover = function() {
        Intervall löschen(Timer);
    }
    img.onmouseleave = autoChange;

Werbe-Plugins

Voraussetzung: Nach dem Laden der Seite erscheint eine Anzeige, die in einem Karussell angezeigt wird. Bewegen Sie die Maus hinein und schweben Sie darüber, bewegen Sie die Maus heraus und die Anzeige wird weiterhin angezeigt. Klicken Sie zum Löschen auf X.

<div id="gewinn">
        <Bild-ID = "Bild" />
        <button id = "ad_btn">X</button>  
        // Ich übe, das Kreuz wird durch X ersetzt, du kannst es durch Icon ersetzen, wenn du deinem eigenen Projekt beitrittst
</div>

//Die Popup-Anzeige wird nach dem Laden der Seite angezeigt. Klicken Sie auf X, um sie zu löschen.
var ad = document.getElementById('win');
var img = document.getElementById('img');
var ad_btn = document.getElementById('ad_btn');
var Zeitgeber;
fenster.onload = Funktion () {
    // Intervall löschen (Timer);
    Timer = setzeTimeout(() => {
            Anzeige.Stil.Anzeige = "Block";  
        }, 2000);
        ändern();
}

Variablenanzahl=0;
varnum = 0;
var imgTimer = null;
//Bild srcList
var picList = ['../img/88.jpg','../img/one.jpg','../img/family.jpg','../img/are.jpg'];
Funktion ändern() {
    Intervall löschen(imgTimer)
    imgTimer = setInterval(() => {
       wenn(Anzahl === Bildliste.Länge) {
           Anzahl = 0;
           zurücksetzenShow();
       } anders {
           startShow();
       }
       zählen++;          
   }, 3000);
}
Funktion ResetShow() {
    img.src = Bildliste[0];
    Zahl = 0;
    startShow();
}

Funktion startShow() {
    wenn(Anzahl < Bildliste.Länge) {
        img.src = Bildliste[num++];
    } anders {
        zurücksetzenShow();
    }
   
}


ad_btn.addEventListener('klicken' , (e)=>{
    Anzeige.Stil.Anzeige = "keine";
    Zeitüberschreitung löschen(Timer)
});

ad.addEventListener('mouseover' , ()=>{
    : ClearInterval(imgTimer);
})
ad.onmouseleave = Funktion() {
    ändern();
}

Durchführungsanzeige:

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:

js Bilderkarussell (5 Bilder)
Code-Sharing für automatisches JS-Bildkarussell (JS-Bildkarussell)
Der einfachste JavaScript-Bildkarussellcode (zwei Methoden)
Natives js und jquery zum Erzielen von Bildkarussell-Spezialeffekten
Implementierungscode für den js-Bildkarusselleffekt
So implementieren Sie einen einfachen Bildkarusselleffekt mit JS
JS realisiert einfachen Bildkarusselleffekt
Javascript zur Realisierung des Scrollrad-Karussellbildes
JS implementiert eine einfache automatische Bildrotation
js realisiert den Effekt eines Karussellbildes, reines js realisiert das automatische Umschalten von Bildern

<<: Drei Implementierungsmethoden für die MySQL-Kopiertabelle und die Grant-Analyse

>>: Eine kurze Analyse von Linux resolv.conf

So ändern Sie das Root-Passwort von MySQL in Docker

Natives JS zur Implementierung eines Bildkarussells. JS zur Implementierung eines kleinen Werbe-Plugins.

Karussell

Werbe-Plugins

So ändern Sie das Root-Passwort von MySQL in Docker

Erklärung der Funktionsweise und Verwendung von Redux

Detaillierte Erklärung zur Verwendung der benutzerdefinierten Vue-Baumsteuerung

Detailliertes Beispiel des MySQL InnoDB-Sperrmechanismus

Auszeichnungssprache - CSS-Layout

So implementieren Sie abgerundete Ecken mit CSS3 unter Verwendung von JS

Detaillierte Erläuterung der Nginx-Zugriffsbeschränkungskonfiguration

Implementierungsbeispiel für die Bereitstellung von Docker rocketmq

Bei der Verwendung von MySQL aufgetretene Probleme

Zusammenfassung und Beispiele der Kommunikationsmethoden für Vue3-Komponenten

Artikel empfehlen

Vue realisiert Bildwechseleffekt

MySQL Online-Übung zur Deadlock-Analyse

MySQL verwendet benutzerdefinierte Funktionen, um die übergeordnete ID oder untergeordnete ID rekursiv abzufragen

Vue3.0 implementiert die Kapselung des Dropdown-Menüs

Javascript Frontend Optimierungscode

Der Unterschied zwischen JS-Pre-Parsing und Variablen-Promotion im Web-Interview

JavaScript zum Implementieren der Inhaltsaufforderung und der versteckten Funktion des Eingabefelds

Versteckter Overhead von Unix/Linux-Forks

Erklärung der Rückgabe einer MySQL-Tabelle führt zur Ungültigkeit des Index

4 Möglichkeiten, mit CSS ein zweispaltiges Layout mit fester linker Spalte und adaptiver rechter Spalte zu erreichen

Einführung in die Benutzerverwaltung unter Linux-Systemen

Analyse des Prinzips der Verwendung von PDO zur Verhinderung von SQL-Injection

Beispiel für eine dynamische Sperre der IP-Blacklist von Nginx

Neue Funktionen von JS ES: Einführung in Erweiterungsoperatoren

Webdesign-Tutorial (8): Webseitenhierarchie und Raumgestaltung