recherche

Maison >interface Web >js tutoriel >Explication détaillée des étapes de mise en œuvre de l'effet de séjour du carrousel JS

Explication détaillée des étapes de mise en œuvre de l'effet de séjour du carrousel JS

php中世界最好的语言
php中世界最好的语言original
2018-05-25 11:02:481622parcourir

Cette fois, je vais vous donner une explication détaillée des étapes pour mettre en œuvre l'effet carrousel stay JS. Quelles sont les précautions pour mettre en œuvre l'effet carrousel stay JS. Voici un cas pratique, prenons un. regarder.

1. Idées

1. Le séjour 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'implémenter le carrousel ;

2. La différence est que le séjour du carrousel doit ajouter des attributs de transition et des minuteries pour obtenir l'effet de séjour du carrousel

Étapes  ;

1. Écrivez le style structurel de base

Vous devez ajouter une image supplémentaire identique à la première à la fin pour éliminer la gigue lors du changement ; 🎜>

2. Ajoutez l'événement de séjour du carrousel Sur la base de la fondation précédente, ajoutez directement l'événement par défaut du cercle d'index à l'événement de séjour du carrousel

Remarque : lorsque le carrousel atteint ; la dernière, 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 première image puisque la première image est la même. comme dernière image, cela formera un angle mort visuel, qui ressemble à un effet carrousel continu 

//轮播停留方法
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);
}

3 Ajoutez l'événement d'entrée dans le cercle d'index C'est fondamentalement la même chose que l'événement de fondu entrant et sortant du cercle d'index. La différence est qu'il n'est pas nécessaire de l'appeler ici événement Carousel stay, utilisez directement l'index actuel pour indexer afin que l'image suive la transformation. ; notez que la valeur

doit être marquée à la fin, de sorte que lorsque le comportement par défaut est à nouveau exécuté, le comportement par défaut sera exécuté à rebours en suivant l'image actuellement affichée

count=this.index 

//进入索引圈事件
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;
 }
}
4. Améliorer le code d'entrée et de sortie de la souris

Rendu :

Code complet :

Je te crois J'ai maîtrisé la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! 
<!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>

Lecture recommandée :

Explication détaillée de l'utilisation des expressions régulières sous Linux


Implémentation de la fonction de sauvegarde d'images et les partager dans le cercle d'amis dans le mini programme

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：Résumé des méthodes de chargement du module WebpackArticle suivant：Résumé des méthodes de chargement du module Webpack

Articles Liés

Voir plus