Home > Article > Web Front-end > Detailed explanation of steps to implement JS carousel stay effect

Detailed explanation of steps to implement JS carousel stay effect

php中世界最好的语言Original: 2018-05-25 11:02:481593browse

This time I will bring you a detailed explanation of the steps to implement the JS carousel stay effect. What are the precautions for implementing the JS carousel stay effect? The following is a practical case, let’s take a look.

1. Ideas

1. Carousel stay is very similar to wireless scrolling, both use attributes and variables to control movement to implement carousel;

2. The difference is that the carousel stay requires adding transition attributes and a timer to achieve the carousel stay effect;

2. Steps

1. Write the basic structure style

You need to add one more picture that is the same as the first one at the end to eliminate the jitter when switching;

2. Add the carousel stay event based on the previous foundation, directly add the index circle default event to the carousel stay event;

Note: When the carousel reaches the last one, The transition needs to be eliminated. The setTimeout timer is used here. There will be no delay after the last picture of the card is rotated, and it will jump directly to the first picture. Since the first picture is the same as the last picture, it will form a visual blind spot, which looks like Continuous carousel effect;

//轮播停留方法
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. Add the event of entering the index circle

This is basically the same as the event of fading in and out of the index circle. The difference is that there is no need to call the carousel here. For stay events, directly use the current index to index so that the picture follows the transformation; note that the count=this.index value must be marked at the end so that when the default behavior is executed again, the default behavior will be executed backwards following the currently displayed image;

//进入索引圈事件
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. Improve the mouse entry and exit code

Rendering:

Complete code:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Detailed explanation of steps to implement JS carousel stay effect

Related articles