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

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

Artikel empfehlen

So löschen Sie den gesamten Inhalt eines Verzeichnisses mit Ansible

Studierende, die Ansible verwenden, wissen, dass ...

Können Sie alle Testfragen zum Erstellen der Webseite beantworten?

Fragen zum Webdesign. Können Sie alle beantworten...

Detaillierte Schritte für QT zum Herstellen einer Verbindung zur MySQL-Datenbank

Der erste Schritt besteht darin, das entsprechend...

MySQL implementiert Ranking und fragt die angegebene Benutzer-Ranking-Funktion ab (parallele Ranking-Funktion) Beispielcode

Vorwort Dieser Artikel stellt hauptsächlich die r...

Die Qualitäten und Fähigkeiten, die ein Webdesigner haben sollte

Webdesign ist eine aufstrebende Randbranche, die n...

So zeigen Sie laufende Hintergrundprogramme in Linux an und beenden sie

Linux-Taskverwaltung - Ausführung und Beendigung ...

Node verwendet koa2, um eine einfache JWT-Authentifizierungsmethode zu implementieren

Einführung in JWT Was ist JWT Der vollständige Na...

Zusammenfassung der MySQL-Datenbank-ähnlichen Anweisung zur Platzhalter-Fuzzy-Abfrage

MySQL-Fehler: Parameterindex außerhalb des gültig...

So verbinden Sie Navicat mit der Docker-Datenbank auf dem Server

Starten Sie den MySQL-Container in Docekr Verwend...

Beispielanalyse von Linux-Benutzer- und Gruppenbefehlen [Wechseln, Hinzufügen von Benutzern, Berechtigungskontrolle usw.]

Dieser Artikel beschreibt die Linux-Benutzer- und...

So verbinden Sie JDBC mit MySQL 5.7

1. Bereiten Sie zunächst die MySQL- und Eclipse-U...

Zusammenfassung einiger effizienter magischer Operatoren in JS

JavaScript veröffentlicht mittlerweile jedes Jahr...

Eine einfache Methode zum Implementieren der zeitgesteuerten Protokolllöschung unter Linux

Einführung Linux ist ein System, das automatisch ...

So deinstallieren Sie Node und NPM vollständig auf dem Mac

npm deinstallieren sudo npm deinstallieren npm -g...

img usemap Attribut China Karte Link

HTML-img-Tag: definiert ein Bild, das in eine Webs...