Maison > Article > interface Web > Exemple de tutoriel de défilement transparent du graphique carrousel js

Exemple de tutoriel de défilement transparent du graphique carrousel js

零下一度original: 2017-06-19 09:04:082180parcourir

Cet article présente principalement en détail l'effet de défilement transparent de l'image du carrousel js, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Si vous souhaitez connaître le début et la fin de l'image du carrousel quand. faire S'ils ne peuvent pas être connectés, l'effet sera un peu moche. Voici une méthode que j'utilise couramment :

Laissez-moi d'abord l'expliquer avec des mots :

Si vous souhaitez en afficher 5. images, ils sont 1, 2 et 3. ,4,5 Ensuite l'introduction du code est comme ceci : 1,2,3,4,5,1

Je ne dirai pas grand chose sur le rotation séquentielle ici, le focus est de 5>1 et le carrousel de 1>5

i représente l'index de l'image actuelle

pre représente le bouton de l'image précédente

next représente le bouton de l'image suivante

ul représente la liste d'images

(1) 5>1>2... Quand le bouton "suivant" passe de 5 à 1, il tourne normalement dans l'ordre, et lorsque l'image actuelle est le deuxième "1", l'image suivante doit être "2", puis lorsque "next", la valeur gauche de ul est 0, i==1;

(2) 1>5>4.... Lorsque Lorsque le bouton "pre" passe de l'image actuelle "1" (le premier 1) à l'image 5, i==4, la valeur gauche de ul devient -5 fois la largeur de l'img, c'est-à-dire que le premier 1 devient tranquillement le dernier 1

est un peu déroutant à exprimer en langage, voici le code :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 *{padding: 0;margin: 0;}
 .container{
  width: 273px;height: 163px;overflow: hidden;
  position: relative;margin: 0 auto;
 }
 .list{
  position: absolute;width: 1638px;top: 0;left: 0px;
 }
 .list li{
  float: left;list-style: none;
 }
 .btn{
  position: absolute;display: block;width: 40px;height: 50px;font-size: 40px;
  text-align: center;font-weight: bold;top: 50%;margin-top: -25px;background-color: rgba(255,255,255,0.5);cursor:pointer;
 }
 .btn:hover{
  background-color: rgba(0,0,0,0.3);color: #fff;
 }
 .pre{
  left: 0;
 }
 .next{
  right: 0;
 }
 .nav{
  position: absolute;bottom: 5px;display: flex;justify-content: center;width: 100%;
 }
 .nav span{
  width: 10px;height: 10px;border-radius: 10px;background-color: #fff;z-index: 2;display: inline-block;margin-right: 10px;cursor: pointer;
 }
 span.on{
  background-color: orange;
 }
 </style>
</head>
<body>
 <p class="container">
 <ul class="list" style="left: 0px">
  <li><img src="./images/1.png" alt=""></li>
  <li><img src="./images/2.png" alt=""></li>
  <li><img src="./images/3.png" alt=""></li>
  <li><img src="./images/4.png" alt=""></li>
  <li><img src="./images/5.png" alt=""></li>
  <li><img src="./images/1.png" alt=""></li>
 </ul>
 <p class="nav">
  <span class="on"></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
 </p>
 <em class="next btn">></em>
 <em class="pre btn"><</em>
 </p>
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript">
 $(function(){
  var i=0;
  $(&#39;.next&#39;).click(function(){
  i++;
  console.log(i);
 
  moveImg(i);
   
  });
  $(&#39;.pre&#39;).click(function(){
  i--;
  moveImg(i);
   
  });
  $(&#39;.nav span&#39;).click(function(){
  var _index=$(this).index();
  i=_index;
  moveImg(i);
 
   
  });
  // i的作用：决定下一张图片是谁————也就是说ul的left是多少。
  // $(&#39;.list&#39;).css({left)的值是从图a过度是此时的ul的left。
  function moveImg(){
  if (i==6) {
   i=1;
   $(&#39;.list&#39;).css({&#39;left&#39;:&#39;0&#39;});
  }
   // 是第一张
  if(i==-1){
   i=4;
   $(&#39;ul&#39;).css({left:(5*-273)});
  }
  $(&#39;.list&#39;).stop().animate({&#39;left&#39;:-273*i+&#39;px&#39;},1000);
  if (i==5) {
  $(&#39;.nav span&#39;).eq(0).addClass(&#39;on&#39;).siblings().removeClass(&#39;on&#39;);
 
  }
  $(&#39;.nav span&#39;).eq(i).addClass(&#39;on&#39;).siblings().removeClass(&#39;on&#39;);
 
  }
 })
 </script>
</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Exemple de partage de code sur la façon de changer le champ de recherche Web de navigation du moteur de recherche à l'aide de JavaScriptArticle suivant：Exemple de partage de code sur la façon de changer le champ de recherche Web de navigation du moteur de recherche à l'aide de JavaScript

Articles Liés

Voir plus