Implémentation d'effets de carrousel automatiques basés sur jQuery

L'exemple de cet article décrit l'implémentation d'effets de carrousel automatiques avec jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un code d'effet carrousel automatique basé sur jQuery. Le processus de mise en œuvre est très simple.
Rendu de l'opération : -------------------Voir l'effet Télécharger le code source------------------

Bref tutoriel
jquery.caroursel.js est un plug-in de carrousel jQuery très pratique qui peut pivoter automatiquement. Ce carrousel empile les images et les pousse tour à tour vers l'avant pour les afficher, formant ainsi un effet carrousel.
Comment utiliser
Le plug-in carrousel jQuery doit importer jQuery, fichier jquery.carousel.js.

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

Copier après la connexion

Structure HTML

Le plug-in carrousel jQuery utilise un élément

comme élément d'habillage. À l'intérieur, il contient une liste non ordonnée pour placer des images et deux éléments

<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>

Copier après la connexion

Le nombre d'images doit être un nombre impair, sinon il y aura des anomalies dans l'affichage. Il s'agit d'un petit bug de ce plug-in.
Style CSS

Vous devez ajouter ci-dessous quelques styles CSS nécessaires pour cet effet carrousel.

.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
}

Copier après la connexion

Initialiser le plugin

Une fois l'élément DOM de la page chargé, vous pouvez initialiser le plug-in carrousel via la méthode suivante.
Caroursel.init($('.caroursel')) Si vous devez personnaliser certains paramètres, vous pouvez définir l'attribut de configuration des données dans l'élément

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

Copier après la connexion

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.

L'implémentation jQuery du code d'effet carrousel automatique partagé avec vous est la suivante

<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>

Copier après la connexion

Je partage avec vous le code de l'effet carrousel automatique jQuery. J'espère que vous pourrez l'aimer et l'appliquer dans la pratique.

Étiquettes associées：

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

Article précédent：Résumé des exemples de méthodes de chargement dynamique de scripts dans les compétences js_javascript Article suivant：Effets de chronologie Jquery (trois types différents)_jquery

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur