Heim > Artikel > Web-Frontend > Implementierung automatischer Karussell-Karusselleffekte basierend auf jQuery_jquery

Implementierung automatischer Karussell-Karusselleffekte basierend auf jQuery_jquery

WBOYOriginal: 2016-05-16 15:34:121644Durchsuche

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>

HTML-Struktur

Das jQuery-Karussell-Plugin verwendet ein dc6dce4a544fdca2df29d5ac0ea9906b als Wrapping-Element. Darin befindet sich eine ungeordnete Liste zum Platzieren von Bildern und zwei dc6dce4a544fdca2df29d5ac0ea9906b-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>

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
}

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 dc6dce4a544fdca2df29d5ac0ea9906b-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"  //延迟时间
}'>

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>

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.

Stellungnahme：

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

Vorheriger Artikel：Zusammenfassung von Methodenbeispielen zum dynamischen Laden von Skripten in js_javascript-KenntnissenNächster Artikel：Zusammenfassung von Methodenbeispielen zum dynamischen Laden von Skripten in js_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen