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

Eine kurze Diskussion über vier Lösungen für Vue Single Page SEO

Inhaltsverzeichnis 1.Bereitstellung der serversei...

Aufbau einer Zookeeper-Standalone-Umgebung und einer Clusterumgebung

1. Aufbau einer Einzelmaschinenumgebung# 1.1 Heru...

Verschiedene Probleme, auf die Anfänger bei der Installation von MySQL in Docker stoßen

Vorwort In letzter Zeit dauert das Herunterfahren...

Verwenden Sie zum Senden des Formulars ein Bild statt einer Schaltfläche.

Code kopieren Der Code lautet wie folgt: <form...

Detailliertes Beispiel für MySQL-Datenspeicherprozessparameter

Es gibt drei Typen von MySQL-gespeicherten Prozed...

MySQL-Abfrageoptimierung: Eine Tabellenoptimierungslösung für 1 Million Daten

1. Abfragegeschwindigkeit von zwei Abfrage-Engine...

Detaillierte Erläuterung der Vue-Projektverpackung

Inhaltsverzeichnis 1. Zugehörige Konfiguration Fa...

Detaillierte Erklärung des Typschutzes in TypeScript

Inhaltsverzeichnis Überblick Typzusicherungen in ...

Detailliertes Tutorial zum Upgrade von Zabbix Monitoring 4.4 auf 5.0

1. Zabbix-Backup [root@iZ2zeapnvuohe8p14289u6Z /]...

Detailliertes Tutorial zum Bereitstellen eines Hadoop-Clusters mit Docker

Ich möchte in meinem Unternehmen kürzlich einen H...

MySQL mit Nutzungsanalyse

Verwendung von „haben“ Mit der Having-Klausel kön...

So implementieren Sie eine steuerbare gepunktete Linie mit CSS

Vorwort Die Verwendung von CSS zum Generieren gep...

Zusammenfassung häufig verwendeter Zeit-, Datums- und Konvertierungsfunktionen in MySQL

Dieser Artikel fasst hauptsächlich einige häufig ...

Erläuterung der Lösung zur mobilen H5-Bildgenerierung in JavaScript

Derzeit gibt es viele Betriebsaktivitäten für öff...

So benachrichtigen Sie Benutzer per E-Mail über die Ergebnisse der Crontab-Ausführung

Symptom Ich habe eine Crontab-Aufgabe auf einem C...