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
Detaillierte Erklärung der englischen Namen, die der Schriftfamilie chinesischer Schriftarten in CSS-Stilen entsprechen
Lied: SimSun Fett: SimHei Microsoft YaHei: Micros...
Warum kann mein Tomcat nicht starten?
Inhaltsverzeichnis Phänomen: Portnutzung: Rechtsc...
Eine einfache Implementierungsmethode für eine digitale LED-Uhr in CSS3
Das dürfte etwas sein, was viele Leute gemacht ha...
Beheben Sie das Problem, dass der Dienst nicht gestartet werden kann, wenn die dekomprimierte Version von MySQL 5.7.18 Winx64 unter Win7 x64 installiert wird
Heute habe ich mysql-5.7.18-winx64.zip von der of...
Super ausführliches Tutorial zur Implementierung der TabBar untere Navigationsleiste in Vue
Inhaltsverzeichnis Projekteinführung: Projektverz...
Zusammenfassung der Wissenspunkte zum B-Tree-Index bei der MySQL-Optimierung
Warum müssen wir SQL optimieren? Wenn wir SQL-Anw...
Beispielcode zur Implementierung einer Auto-Increment-Sequenz in MySQL
1. Erstellen Sie eine Sequenztabelle CREATE TABLE...
Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 2
Designer verfügen über eine eigene Schriftartenbi...
JavaScript-Entwurfsmuster, Befehlsmuster
Das Befehlsmuster ist ein Verhaltensentwurfsmuste...
Detaillierte Erklärung zur Lösung des Problems zu langer Inhalte in CSS
Wenn wir CSS schreiben, vergessen wir manchmal di...
Beispielcode für HTML-Framesets
Dieser Artikel stellt ein möglichst einfaches Fra...
So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten
Inhaltsverzeichnis Vorwort: Was ist ein Wasserfal...
Detaillierte Erklärung der Fallstricke beim Mischen von npm und cnpm
Inhaltsverzeichnis Ursache Grund Einführung in NP...
Beispielanalyse der Verwendung der Selbstinkrementierung von MySQL-Nichtprimärschlüsseln
Dieser Artikel veranschaulicht anhand eines Beisp...
ReactJs-Grundlagen-Tutorial - Essential Edition
Inhaltsverzeichnis 1. Einführung in ReactJS 2. Ve...