Maison > Article > interface Web > À propos de la mise en œuvre de l'effet de séjour du carrousel JavaScript

À propos de la mise en œuvre de l'effet de séjour du carrousel JavaScript

不言original: 2018-07-04 10:22:531114parcourir

L'article suivant vous expliquera comment implémenter l'effet de maintien du carrousel JavaScript. Le maintien du carrousel est très similaire au défilement sans fil. Les deux utilisent des attributs et des variables pour contrôler le mouvement afin d'obtenir un carrousel. Amis intéressés, jetons un coup d'oeil

1. Idées

1. Le séjour en carrousel est très similaire au défilement sans fil, utilise à la fois des attributs et des variables. contrôler le mouvement pour réaliser le carrousel

2. La différence est que le séjour du carrousel doit ajouter un attribut de transition et une minuterie pour obtenir l'effet de séjour du carrousel ; 2, Étapes

1. Écrivez le style de structure de base

Vous devez ajouter une image supplémentaire identique à la première. à la fin pour éliminer la gigue ;

2. Ajoutez l'événement de séjour du carrousel avec la fondation précédente, ajoutez directement l'événement de séjour du carrousel ;

Remarque : lorsque le carrousel atteint la dernière image, la transition doit être éliminée. Le minuteur setTimeout est utilisé ici. Il n'y aura aucun délai après la rotation de la dernière image de la carte, et elle passera directement à la dernière image. première image. Puisque la première image est la même que la dernière image, elle formera donc un angle mort visuel et ressemblera à un effet de carrousel continu

3. Ajoutez l'événement d'entrée dans le cercle d'index

//轮播停留方法
function move() {
 box.className = "box anmint";
 circle[count].style.backgroundColor = "";
 count++;
 box.style.marginLeft = (-800 * count) + "px";
 //最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换
 setTimeout(function () {
   if (count >= 6) {
    count = 0;
    box.className = "box";
    //marginLeft=0之前去除过渡属性
    box.style.marginLeft = "0px";
   }
  circle[count].style.backgroundColor = "red";
 }, 500);
}

C'est fondamentalement la même chose que l'événement de cercle d'index de fondu entrant, la différence est qu'il n'est pas nécessaire. pour appeler l'événement carrousel stay. L'index actuel est directement utilisé pour indexer l'image pour suivre la transformation ; notez que la valeur

doit être marquée à la fin pour exécuter à nouveau le comportement par défaut. l'image actuellement affichée ;

count=this.index

4. Améliorer le code d'entrée et de sortie de la souris

//进入索引圈事件
for(var j=0;j<circle.length;j++){
 circle[j].index=j;
 circle[j].onmouseenter=function(){
  for(var k=0;k<circle.length;k++){
   circle[k].style.backgroundColor="";
  }
  this.style.backgroundColor="red";
  //图片跟随移动
  box.className="box anmint";
  box.style.marginLeft=(-800*this.index)+"px";
  count=this.index;
 }
}

Rendu :

Code complet :

Ce qui précède est le contenu de cet article Tout le contenu, je J'espère que cela sera utile à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>JS轮播停留效果</title> 
 <style> 
  *{margin: 0;padding: 0;} 
  html,body{width: 100%;height: 100%;} 
  .block{ 
   width: 800px; 
   height: 400px; 
   margin: 80px auto; 
   position: relative; 
   border: 1px solid red; 
   overflow: hidden; 
  } 
  .box{ 
   width: 5600px; 
   height: 400px; 
   float: left; 
  } 
  .anmint{ 
   transition: all 0.5s ease-in-out; 
  } 
  img{ 
   width: 800px; 
   height: 400px; 
   float: left; 
  } 
  .cir{ 
   width: 150px; 
   height: 20px; 
   z-index: 7; 
   position: absolute; 
   bottom: 10px; 
   left: 320px; 
  } 
  .circle{ 
   width: 10px; 
   height: 10px; 
   border: 2px solid grey; 
   border-radius: 50%; 
   float: left; 
   margin: 0 5px; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var box=document.getElementsByClassName("box")[0]; 
   var count=0; 
   //索引圈事件 
   var circle=document.getElementsByClassName("circle"); 
   circle[0].style.backgroundColor="red"; 
   var time=setInterval(function(){ 
    move(); 
   },2000); 
   //鼠标进入事件 
   var block=document.getElementsByClassName("block")[0]; 
   block.onmouseenter=function(){ 
    clearInterval(time); 
   }; 
   //鼠标离开事件 
   block.onmouseleave=function(){ 
    time=setInterval(function(){ 
     move(); 
    },2000); 
   }; 
   //进入索引圈事件 
   for(var j=0;j<circle.length;j++){ 
    circle[j].index=j; 
    circle[j].onmouseenter=function(){ 
     for(var k=0;k<circle.length;k++){ 
      circle[k].style.backgroundColor=""; 
     } 
     this.style.backgroundColor="red"; 
     //图片跟随移动 
     box.className="box anmint"; 
     box.style.marginLeft=(-800*this.index)+"px"; 
     count=this.index; 
    } 
   } 
   //轮播停留方法 
   function move() { 
    box.className = "box anmint"; 
    circle[count].style.backgroundColor = ""; 
    count++; 
    box.style.marginLeft = (-800 * count) + "px"; 
    //最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换 
    setTimeout(function () { 
      if (count >= 6) { 
       count = 0; 
       box.className = "box"; 
       //marginLeft=0之前去除过渡属性 
       box.style.marginLeft = "0px"; 
      } 
     circle[count].style.backgroundColor = "red"; 
    }, 500); 
   } 
  } 
 </script> 
</head> 
<body> 
<p class="block"> 
 <p class="box"> 
   <img class="imgg" src="./image/box1.jpg"> 
   <img class="imgg" src="./image/box2.jpg"> 
   <img class="imgg" src="./image/box3.jpg"> 
   <img class="imgg" src="./image/box4.jpg"> 
   <img class="imgg" src="./image/box5.jpg"> 
   <img class="imgg" src="./image/box6.jpg"> 
   <img class="imgg" src="./image/box1.jpg"> 
 </p> 
 <p class="cir"> 
  <p class="circle"></p> 
  <p class="circle"></p> 
  <p class="circle"></p> 
  <p class="circle"></p> 
  <p class="circle"></p> 
  <p class="circle"></p> 
 </p> 
</p> 
</body> 
</html>

À propos de l'utilisation du composant de graphique carrousel vue.js

Méthode d'implémentation de l'encapsulation de graphique carrousel 3D VUE

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：À propos de la promotion des variables et de la promotion des fonctions en javascriptArticle suivant：À propos de la promotion des variables et de la promotion des fonctions en javascript

Articles Liés

Voir plus