Maison >interface Web >js tutoriel >Implémentation d'effets de carrousel automatiques basés sur jQuery_jquery

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

WBOYoriginal: 2016-05-16 15:34:121664parcourir

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>

Structure HTML

Le plug-in carrousel jQuery utilise un élément dc6dce4a544fdca2df29d5ac0ea9906b comme élément d'habillage. À l'intérieur, il contient une liste non ordonnée pour placer des images et deux éléments dc6dce4a544fdca2df29d5ac0ea9906b

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

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
}

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 dc6dce4a544fdca2df29d5ac0ea9906b

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

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>

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.

Déclaration：

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

Article précédent：Résumé des exemples de méthodes de chargement dynamique de scripts dans les compétences js_javascriptArticle suivant：Résumé des exemples de méthodes de chargement dynamique de scripts dans les compétences js_javascript

Articles Liés

Voir plus