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
CSS3 realisiert den Animationseffekt der Lotusblüte
Schauen wir uns zunächst die Wirkung an: Dieser E...
Rsync+crontab regelmäßige Synchronisierungssicherung unter centos7
In letzter Zeit möchte ich regelmäßig wichtige in...
JS asynchroner Code Unit-Test Magie Promise
Inhaltsverzeichnis Vorwort Verkettung von Verspre...
UL-Listen-Tag-Design für Webseiten mit mehrspaltigem Layout
Als ich vor ein paar Tagen ein dreispaltiges Layou...
So verwenden Sie VirtualBox zum Erstellen einer lokalen virtuellen Maschinenumgebung auf dem Mac
1. Big Data und Hadoop Um Big Data zu studieren u...
Ein kurzer Vortrag über MySQL-Pivottabellen
Ich habe eine Produktteiletabelle wie diese: Teil...
Grafisches Tutorial zur Installation von MySQL 5.7.19 (tar.gz) unter Linux
Das erste Tutorial zur Installation der MySQL-5.7...
Vergleich von mydumper und mysqldump in MySQL
Wenn Sie nur ein paar Tabellen oder eine einzelne...
Beispielcode für die Projektbereitstellung zur Trennung von Front-End und Back-End in Flask und Vue
Ich habe vor einiger Zeit ein Projekt entwickelt....
MySQL führt SQL-Datei aus und meldet Fehler Fehler: Unbekannte Speicher-Engine „InnoDB“-Lösung
Finden Sie das Problem Ich hatte kürzlich ein Pro...
Beispielcode, wie CSS mehrere Klassen abgleicht
CSS stimmt mit mehreren Klassen überein Das folge...
Im A-Tag befinden sich Text und Bilder. Wie kann ich den Text ausblenden und nur das Bild anzeigen?
Oftmals werden Sie auf einen <a>-Tag-Stil s...
Quellcode der HTML-Einstellungen für die Benutzerregistrierungsseite
Gestalten Sie die oben gezeigte Webseite: <!DOC...
mysql implementiert den Import nur einer angegebenen Tabelle aus der SQL-Datei der exportierten Daten
Szenario Gestern hat das System automatisch alle ...
So lassen Sie DOSBox nach dem Start automatisch Befehle ausführen
Mit DOSBox können Sie DOS unter Windows simuliere...