jquery einfache Methode zur Implementierung von slideshow_jquery
May 16, 2016 pm 03:47 PMDas Beispiel in diesem Artikel beschreibt, wie man einfach eine Slideshow mit jquery implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<style type="text/css">
.slide{position: relative; overflow: hidden;}
.slide img{max-width: 100%; position: absolute; left: 0; top: 0;}
.slide img:first-child{position: relative; visibility: visible;}
</style>
</head>
<body>
<div class="slide">
<img src="images/172233f3cyzidsc8rl8irz.jpg" />
<img src="images/172231vxzvzz2xvk92d5m0.jpg" />
<img src="images/172228jybldywbdwdflfzm.jpg" />
<img src="images/172223i8otbbsot8b232o5.jpg" />
</div>
<script type="text/javascript">
var size = $('.slide img').size();
var _index = size;
var timer = null;
$('.slide').append($('.slide img:eq(0)').clone());
timer = setInterval(function(){
$('.slide img').eq(_index).fadeOut(800);
_index == 1?_index=size:_index--;
$('.slide img').eq(_index).fadeIn(800);
},4000);
</script>
</body>
</html>
Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.
Heißer Artikel
Hot-Tools-Tags
Heißer Artikel
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Einführung in die Methode zum Einfügen von Siebenecken in PPT-Folien
Mar 26, 2024 pm 07:46 PM
Einführung in die Methode zum Einfügen von Siebenecken in PPT-Folien
Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung
Feb 27, 2024 pm 06:45 PM
Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung
Schritte zum Vereinheitlichen der Themenfarbe von PPT-Folien
Mar 26, 2024 pm 08:51 PM
Schritte zum Vereinheitlichen der Themenfarbe von PPT-Folien
Wie verwende ich die PUT-Anfragemethode in jQuery?
Feb 28, 2024 pm 03:12 PM
Wie verwende ich die PUT-Anfragemethode in jQuery?
Wie entferne ich das Höhenattribut eines Elements mit jQuery?
Feb 28, 2024 am 08:39 AM
Wie entferne ich das Höhenattribut eines Elements mit jQuery?
jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite
Feb 28, 2024 pm 09:06 PM
jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite
Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern
Feb 28, 2024 pm 05:42 PM
Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern
Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery
Feb 28, 2024 pm 01:15 PM
Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery
