Written in html and js js a carousel map

Original writing is particularly good, originally planned to own wording, but the feeling people say great. I copied over. Only to be thinking is correct, the code will naturally write out the
reprint: https://www.jb51.net/article/121904.htm

Ideas:

First, there must be a container accommodating the picture, is set to single image width and height, and overflow: hidden, thus ensuring that each time only one image can be displayed
Container have put the picture of the list to locate the position, where the images are in the float mode, while at the same time when the image to rotate, so that changing the value of Left list display picture is changed.
Pictures carousel using the timer, change the Left value list by cycle timer is a picture showing
When the mouse to slide the picture, clear the timer, image stop carousel, carousel continued when the mouse is moved
There are a group of small dots on the picture for the current picture corresponding to displayed, and you can view the corresponding pictures through a click
Pictures can be displayed by clicking on the left and right slide

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>轮播图</title>
 <style type="text/css">
  .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;
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="list" style=" left:-600px;">
   <img src="./3.jpg">
   <img src="./1.jpg">
   <img src="./2.jpg">
   <img src="./3.jpg">
   <img src="./1.jpg">
   <img src="./2.jpg">
   <img src="./3.jpg">
   <img src="./1.jpg">
  </div>
  <ul class="dots">
   <li index=1 class="active dot"></li>
   <li index=2 class="dot"></li>
   <li index=3 class="dot"></li>
   <li index=4 class="dot"></li>
   <li index=5 class="dot"></li>
   <li index=6 class="dot"></li>
  </ul>
  <div class="pre"><</div>
  <div class="next">></div>
 </div>
<script type="text/javascript">
 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() {
  var dots = document.getElementsByClassName("dot");
  var len = dots.length;
  for(var i=0 ;i<len ;i++){
   dots[i].className = "dot";
  }

  for(var i=0;i<len;i++){
   /*此处可以不用parseInt，当不用全等时*/
   if(index === parseInt(dots[i].getAttribute("index"))){
    dots[i].className = "dot active";
   }
  }
 }
 function eventBind(){
  /*点的点击事件*/
  var dots = document.getElementsByClassName("dot");
  var len = dots.length;
  for(var i=0;i<len;i++){
   (function(j){
    dots[j].onclick = function(e){
     var ind = parseInt(dots[j].getAttribute("index"));
     animation((index - ind)*(-600));/*显示点击的图片*/
     index = ind;
     dotActive();
    }
   })(i)
  }
  /*容器的hover事件*/
  var con = document.getElementsByClassName("container")[0];
  /*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/
  con.onmouseover = function (e) {
   stopAutoPlay();
  }
  con.onmouseout =function(e){
   autoPlay();
  }
  /*箭头事件的绑定*/
   var pre = document.getElementsByClassName("pre")[0];
   var next = document.getElementsByClassName("next")[0];
   pre.onclick = function (e) {
    dotIndex(false);
    animation(600);
   }
  next.onclick = function (e) {
   dotIndex(true);
   animation(-600);
  }
 }
 function animation(offset){
  var lists = document.getElementsByClassName("list")[0];
  var left = parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
  if(left<-3000){
   lists.style.left = "0";
  }
  else if(left>-600){
   lists.style.left = "-3000px";
  }
  else{
   lists.style.left = left+"px";
  }
 }

</script>
</body>
</html>

Written in html and js js a carousel map

Ideas:

Guess you like