JS easily implements carousel images-JS Tutorial-php.cn

This time I will bring you JS to easily implement carousel images. What are theprecautionsfor easily implementing carousel images with JS. The following is a practical case, let’s take a look.

Thoughts:

1. First, there must be a container to hold images, set to the width and height of a single image, and overflow: hidden, so as to ensure that only one image can be displayed at a time
2. There is a list of images in the Container for positioning Positioning, the pictures are in float mode, and when the pictures are rotated, changing the Left value of the list causes the pictures displayed to change.
3. The picture carousel uses a timer. Change the Left value of the list through the timer so that the pictures are displayed in a loop.
4. When the mouse slides over the picture, clear the timer and the picture will stop carousing. When the mouse is Continue the carousel when removed
5. There is a group of small dots on the picture to correspond to the currently displayed picture. At the same time, you can click to view the corresponding picture
6. The picture can be slid left and right by clicking show

Code:

    轮播图  .container{ margin:0 auto; width:600px; height:400px; position: relative; overflow: hidden; border:4px solid gray; box-shadow: 3px 3px 5px gray; border-radius:10px; } .list{ width:4200px; height:400px; position: absolute; top:0px; } img{ float:left; width:600px; height:400px; } .dots{ position: absolute; left:40%; bottom:30px; list-style: none; } .dots li{ float:left; width:8px; height:8px; border-radius: 50%; background: gray; margin-left:5px } .dots .active{ background: white; } .pre,.next{ position: absolute; top:40%; font-size:40px; color:white; text-align:center; background: rgba(128,128,128,0.5); /* display:none;*/ } .pre{ left:30px; } .next{ right:30px; }  
           
        <
 >
 
  var index=1,timer; function init(){ eventBind(); autoPlay(); } init(); function autoPlay(){ timer =setInterval(function () { animation(-600); dotIndex(true); },1000) } function stopAutoPlay() { clearInterval(timer); } function dotIndex(add){ if(add){ index++; } else{ index--; } if(index>5){ index = 1; } if(index<1){ index=5; } dotActive(); } function dotActive() { vardots=document.getElementsByClassName("dot"); varlen=dots.length; for(vari=0;i-600){ lists.style.left = "-3000px"; } else{ lists.style.left = left+"px"; } }

Copy after login

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!