Implementierung automatischer Karussell-Karusselleffekte basierend auf jQuery

Das Beispiel in diesem Artikel beschreibt die Implementierung automatischer Karussell-Karusselleffekte mit jQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein automatischer Karussell-Karussell-Effektcode, der auf jQuery basiert. Der Implementierungsprozess ist sehr einfach.
Vorgangsrendering: -------------------Sehen Sie sich den Effekt an. Laden Sie den Quellcode herunter------------------

Kurzes Tutorial
jquery.caroursel.js ist ein sehr praktisches jQuery-Karussell-Plug-In, das automatisch rotieren kann. Dieses Karussell stapelt Bilder und schiebt die Bilder der Reihe nach zur Anzeige nach vorne, wodurch ein Karusselleffekt entsteht.
Anwendung
Das jQuery-Karussell-Plug-in muss die jQuery-Datei jquery.carousel.js importieren.

<script src="js/jquery.min.js"></script>
<script src="js/jquery.carousel.js"></script>

Nach dem Login kopieren

HTML-Struktur

Das jQuery-Karussell-Plugin verwendet ein

als Wrapping-Element. Darin befindet sich eine ungeordnete Liste zum Platzieren von Bildern und zwei

-Elemente als vordere und hintere Navigationsschaltflächen.

<div class="caroursel rotator-demo">
 <ul class="rotator-list">
 <li class="rotator-item"><img src="image/1.jpg"></li>
 <li class="rotator-item"><img src="image/2.jpg"></li>
 <li class="rotator-item"><img src="image/3.jpg"></li>
 </ul>
 <div class="rotator-btn rotator-prev-btn"></div>
 <div class="rotator-btn rotator-next-btn"></div>
</div>

Nach dem Login kopieren

Die Anzahl der Bilder muss ungerade sein, sonst kommt es zu Auffälligkeiten in der Anzeige. Dies ist ein kleiner Fehler dieses Plug-Ins.
CSS-Stil

Für diesen Karusselleffekt müssen Sie unten einige notwendige CSS-Stile hinzufügen.

.rotator-main {
 position: relative;
 width: 900px;
 height: 400px
}
 
.rotator-main a, .rotator-main img { display: block; }
 
.rotator-main .rotator-list {
 width: 900px;
 height: 400px
}
 
.rotator-main .rotator-list .rotator-item {
 position: absolute;
 left: 0px;
 top: 0px
}
 
.rotator-main .rotator-btn {
 position: absolute;
 height: 100%;
 width: 100px;
 top: 0px;
 z-index: 10;
 opacity: 0;
}
 
.rotator-main .rotator-prev-btn {
 left: 0px;
 background: url("../image/btn_l.png") no-repeat center center;
 background-color: red
}
 
.rotator-main .rotator-next-btn {
 right: 0px;
 background: url("../image/btn_r.png") no-repeat center center;
 background-color: red
}

Nach dem Login kopieren

Plugin initialisieren

Nachdem das Seiten-DOM-Element geladen wurde, können Sie das Karussell-Plug-in mit der folgenden Methode initialisieren.
Caroursel.init($('.caroursel')) Wenn Sie einige Parameter anpassen müssen, können Sie das Dateneinstellungsattribut im

-Element der obersten Ebene festlegen.

<div class="caroursel rotator-main"
  data-setting = '{
  "width":1000,   //旋转木马的宽度
  "height":270,   //旋转木马的高度
  "posterWidth":640, //当前显示的图片的宽度
  "posterHeight":270, //当前显示的图片的高度
  "scale":0.8,   //缩放值
  "algin":"middle",  //对齐方式
  "speed":"1000",  //动画速度
  "isAutoplay":"true", //自动播放
  "dealy":"1000"  //延迟时间
}'>

Nach dem Login kopieren

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.

Die jQuery-Implementierung des mit Ihnen geteilten Codes für den automatischen Karussell-Karusselleffekt lautet wie folgt

<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>jQuery自动轮播旋转木马插件</title>
 <link rel="stylesheet" type="text/css" href="css/normalize.css" />
 <link rel="stylesheet" type="text/css" href="css/default.css">
 <link type="text/css" rel="stylesheet" href="css/carousel.css">
 <style type="text/css">
 .caroursel{margin:150px auto;}
 </style>
 <!--[if IE]>
 <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
 <![endif]-->
</head>
<body>
 <article class="htmleaf-container">
 <header class="htmleaf-header">
 <h1>jQuery自动轮播旋转木马插件</h1>
 
 </header>
 <div class = "caroursel poster-main" data-setting = '{
  "width":1000,
  "height":270,
  "posterWidth":640,
  "posterHeight":270,
  "scale":0.8,
  "dealy":"2000",
  "algin":"middle"
 }'>
  <ul class = "poster-list">
  <li class = "poster-item"><img src="image/1.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/2.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/3.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/4.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/5.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/6.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/1.jpg" width = "100%" height="100%"></li>
  </ul>
  <div class = "poster-btn poster-prev-btn"></div>
  <div class = "poster-btn poster-next-btn"></div>
 </div>
 
 </article>
 
 <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
 <script src="js/jquery.carousel.js"></script>
 <script>
 Caroursel.init($('.caroursel'))
 </script>
</body>
</html>

Nach dem Login kopieren

Ich teile mit Ihnen den Code für den automatischen Karusselleffekt von jQuery. Ich hoffe, dass er Ihnen gefällt und Sie ihn in der Praxis anwenden können.

Verwandte Etiketten：

jquery图片轮播特效 jquery的轮播特效 jquery轮播特效 jQuery轮播特效代码 jQuery实现轮播效

Quelle：php.cn

Vorheriger Artikel：Zusammenfassung von Methodenbeispielen zum dynamischen Laden von Skripten in js_javascript-Kenntnissen Nächster Artikel：Jquery-Timeline-Effekte (drei verschiedene Typen)_jquery

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors