jQuery erzielt einen atmenden Karusselleffekt
|
In diesem Artikel wird der spezifische Code von jQuery zur Erzielung des atmenden Karusselleffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Wahrscheinlich die Idee: Ein atmendes Karussell ist ein Karussell, bei dem Bilder ein- und ausgeblendet werden. Programm:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
</Kopf>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
.groß{
Breite: 560px;
Höhe: 300px;
Position: relativ;
Rand: 200px automatisch;
Rand: 10px durchgehend rot;
}
.großer .Zug{
Breite: 5600px;
Höhe: 300px;
Position: absolut;
links: 0;
oben: 0;
}
.groß .Bewegung li{
/*Float: links;*/
Listenstil: keiner;
Anzeige: keine;
Position: absolut;
oben: 0;
links: 0;
}
.groß ul .erste{
Anzeige: Block;
}
img{
Breite: 560px;
Höhe: 300px;
}
.btn div{
Breite: 40px;
Höhe: 60px;
Hintergrund: rot;
Position: absolut;
oben: 50 %;
Rand oben: -30px;
}
.rightbtn{
rechts:0;
}
.Kreis{
Position: absolut;
links: 0px;
unten: 0px;
Breite: 200px;
Höhe: 30px;
}
.Kreis ul{
/*Überlauf: versteckt;*/
Listenstil: keiner;
schweben: links;
}
.circleUl li{
Hintergrund: weiß;
schweben: links;
Rand rechts: 10px;
Breite: 20px;
Höhe: 20px;
Randradius: 50 %;
}
</Stil>
<Text>
<div Klasse="groß">
<ul Klasse="bewegen">
<li class="first"> <img src="img/0.jpg" alt=""> </li>
<li> <img src="img/1.jpg" alt=""> </li>
<li> <img src="img/2.jpg" alt=""> </li>
<li> <img src="img/3.jpg" alt=""> </li>
</ul>
<div Klasse="btn">
<div Klasse="leftbtn"> < </div>
<div Klasse="rightbtn"> > </div>
</div>
<div Klasse="Kreis">
<ul Klasse="KreisUl">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="js/jquery-1.12.3.min.js"> </script>
<Skript>
// Setze den ersten Punkt auf Rot $(".circleUl li").eq(0).css("background","red");
Var-Index = 0;
$(".leftbtn").klick(function(){
// das alte Bild ausblenden $(".move li").eq(index).fadeOut(400);
Index--;
wenn(index<0){
Index = 3;
}
// Neues Bild wird eingeblendet $(".move li").eq(index).fadeIn(400);
// Ändern Sie die Farbe des kleinen Punkts entsprechend index$(".circleUl li").eq(index).css("background","red").siblings().css("background","white");
});
$(".rightbtn").klick(function(){
$(".move li").eq(index).fadeOut(400);
Index++;
konsole.log(index);
wenn(index == 4 ){
Index = 0;
}
$(".move li").eq(index).fadeIn(400);
$(".circleUl li").eq(index).css("Hintergrund","rot").siblings().css("Hintergrund","weiß");
});
// Klickereignis für kleinen Punkt $(".circleUl li").click(function(){
// Wenn der erste Punkt erneut angeklickt wird, während das erste Bild bereits angezeigt wird, passiert nichts. if(index == $(this).index()) return;
// Das alte Bild wird ausgeblendet $(".move li").eq(index).fadeOut(400);
// Klicken Sie auf einen Punkt und weisen Sie den Index des Punkts dem globalen Variablenindex zu (aktualisieren Sie den globalen Variablenindex).
index = $(dieser).index();
// Neues Bild wird eingeblendet $(".move li").eq(index).fadeIn(400);
// Kleine Punkte ändern die Farbe$(this).css("background","red").siblings().css("background","white");
})
</Skript>
</body>
</html>Laufergebnisse:
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:
|
<<: XHTML-Tutorial für die ersten Schritte: XHTML-Webseiten-Bildanwendung
>>: So installieren Sie MySQL und Redis in Docker
Artikel empfehlen
SQL Left Join und Right Join - Prinzip und Beispielanalyse
Es gibt zwei Tabellen, und die Datensätze in Tabe...
Lösen Sie das Problem, dass Docker Elasticsearch7.x startet und einen Fehler meldet
Verwenden des Docker-Befehls „run“ docker run -d ...
Detaillierte Erklärung zur Verwendung von Tomcat Native zur Verbesserung der Tomcat IO-Effizienz
Inhaltsverzeichnis Einführung So stellen Sie eine...
Detailliertes Verständnis der Vue-Methode zum Generieren von QR-Codes mit vue-qr
Inhaltsverzeichnis npm herunterladen Schritt (1) ...
Detaillierte Erläuterung des Installations- und Konfigurationsprozesses von mysql8.018 unter Linux
Installationseinführung unter Windows: Schauen Si...
Analyse von MySQL-Latenzproblemen und Datenlöschungsstrategieprozess
Inhaltsverzeichnis 1. MySQL-Replikationsprozess 2...
Verwendung des Fokus-innerhalb-Selektors von CSS3
Pseudoelemente und Pseudoklassen Apropos, schauen...
So verwenden Sie Docker-Compose, um Django-Anwendungen offline bereitzustellen
Inhaltsverzeichnis Installieren Sie Docker-ce für...
Vollständiges Installations- und Konfigurations-Tutorialdiagramm für das komprimierte MySQL 8.0.22-Paket (getestet und effektiv)
1. Laden Sie das Zip-Installationspaket herunter ...
Detailliertes Beispiel zum Ändern des Linux-Kontokennworts
Passwort des persönlichen Kontos ändern Wenn norm...
Schreiben Sie einen einfachen Rechner mit JavaScript
Die Wirkung ist wie folgt:Referenzprogramm: <!...
Das CSS3-Diamantpuzzle realisiert die Funktion, nur das Div zu drehen und das Hintergrundbild nicht zu drehen
Nachfragehintergrund Das Projekt wurde mit Vue er...
Einführung in JavaScript-Zahlen- und Mathematikobjekte
Inhaltsverzeichnis 1. Zahlen in JavaScript 2. Mat...
Detaillierte Analyse von Javascript-Datenproxys und Ereignissen
Inhaltsverzeichnis Datenbroker und Events Überprü...
Web-Frontend-Entwicklung CSS-bezogene Teamzusammenarbeit
Die Frontend-Entwicklungsabteilung wächst, die Mi...