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
jQuery implementiert die Registrierungsseite zur Mitarbeiterverwaltung
In diesem Artikelbeispiel wird der spezifische Co...
Vue-Element-Admin integriert eine eigene Schnittstelle, um den Login-Sprung zu realisieren
1. Schauen Sie sich zunächst die Anforderungskonf...
30 Minuten, um Ihnen ein umfassendes Verständnis von React Hooks zu vermitteln
Inhaltsverzeichnis Überblick 1. useState 1.1 Drei...
Beispielcode zur Implementierung eines Foto-Stacking-Effekts mit CSS
Ergebnisse erzielen Schritt 1. Ursprüngliche inde...
So richten Sie Spring Boot mithilfe der Docker-Schichtenverpackung ein
Das Spring Boot-Projekt verwendet Docker-Containe...
Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung
Inhaltsverzeichnis Vorwort 1. Übersicht 2. Lese- ...
HTML-Basis-URL-Tag
Seine Funktion besteht darin, einen globalen Stil ...
Detaillierte Erklärung der Verwendung des chmod-Befehls in Linux
chmod-Befehlssyntax Dies ist die korrekte Syntax ...
Top 10 der nützlichsten und wichtigsten Open-Source-Tools im Jahr 2019
In der Open-Source-Umfrage von Black Duck aus dem...
Beispiel für die Konfiguration von Nginx im CentOS-Server
Laden Sie das sichere Terminal MobaXterm_Personal...
Lösen Sie das Problem des Importierens von Webprojekten in Idea und deren Veröffentlichung in Tomcat
Idea importiert ein bestehendes Webprojekt und ve...
Tiefgreifendes Verständnis der Rolle von Vuex
Inhaltsverzeichnis Überblick So teilen Sie Daten ...
Das Laufschriftelement implementiert Effekte wie scrollende Schriften und Bilder
Mit dem Laufschriftelement können Sie einfache Gle...
Wann sollte man Map anstelle einfacher JS-Objekte verwenden?
Inhaltsverzeichnis 1. Map akzeptiert jeden Schlüs...
Details zur MySQL-Sortierfunktion
Inhaltsverzeichnis 1. Problemszenario 2. Ursachen...