Maison >interface Web >js tutoriel >JavaScript implémente un effet de défilement transparent des images du carrousel

JavaScript implémente un effet de défilement transparent des images du carrousel

陈政宽～original: 2017-06-28 11:40:082300parcourir

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 dans le 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. tout le contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. J'espère également que tout le monde Duoduo soutiendra Script House.

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：Implémentation d'un événement d'entrée de champ de recherche Taobao imitation javascriptArticle suivant：Implémentation d'un événement d'entrée de champ de recherche Taobao imitation javascript

Articles Liés

Voir plus