js automatic carousel

html code area

<div class="chart">
	<ul class="chartlist" id="list">
		<li class="chartitem"><a href=""><img src="images/chart_01.jpg" alt=""></a></li>
		<li class="chartitem"><a href=""><img src="images/chart_02.jpg" alt=""></a></li>
		<li class="chartitem"><a href=""><img src="images/chart_03.jpg" alt=""></a></li>
		<li class="chartitem"><a href=""><img src="images/chart_04.jpg" alt=""></a></li>
		<li class="chartitem"><a href=""><img src="images/chart_05.jpg" alt=""></a></li>
	</ul>
	<button type="button" class="btn" id="goNext">></button>
	<button type="button" class="btn" id="goPre"><</button>
	<ul class="pointlist">
		<li class="point active" data-index="0"></li>
		<li class="point" data-index="1"></li>
		<li class="point" data-index="2"></li>
		<li class="point" data-index="3"></li>
		<li class="point" data-index="4"></li>
	</ul>
</div>

css code area

<style>
	*{
		padding:0px;
		margin:0px;
	}
	.chart {
		width:1226px;
		height:460px;
		margin:0px auto;
		position:relative;
    overflow:hidden;
	}
	.chart > .chartlist {
		width:6130px;
		height:100%;
		list-style:none;
    position:absolute;
	}
	.chart > .chartlist > .chartitem {
		width:1226px;
		height:100%;
    float:left;
	}

    .btn {
    	width:30px;
    	height:50px;
    	font-size:50px;
    	position:absolute;
    	top:180px;
    	z-index:20;
    }
    #goNext{
      position:absolute;
    	right:0px;
    }
    #goPre{
      position:absolute;
    	left:0px;
    }
    .pointlist{
    	position:absolute;
    	list-style:none;
    	right:50px;
    	bottom:50px;
    	z-index:20;
    }
    .point{
    	width:15px;
    	height:15px;
    	border-radius:100%;
    	background-color:rgb(0,0,0,0.4);
    	float:left;
    	margin-right:20px;
    	border-style:solid;
    	border-width:3px;
    	border-color:rgb(255,255,255,1);   
      cursor:pointer;   
    }
  .point.active{
    background-color:black;
  }

js code area

<script type="text/javascript">
  // 第一张图片:1226px;
  // 第二张图片:2452px
  // 第三张图片:3678px;
  // 第四张图片:4904px;
  var list=document.getElementById("list");
	var goNextbtn = document.getElementById("goNext");
	var goPrebtn = document.getElementById("goPre");

	// alert(chartlists);
  goNextbtn.onclick = function(){
    next_pic();
    // alert("下一张图片");
  }
  goPrebtn.onclick = function(){
    Pre_pic();
  }
  function next_pic(){
    index ++;
    if(index >4){
      index = 0;
    }
    showpoint();
    var newLeft;
     if(list.style.left ==="-4904px"){
       newLeft = "0";        
     }else{
       newLeft = list.offsetLeft-1226;
     }
     
     list.style.left = newLeft +'px';
     // console.log(list.style.left);
  }
  function Pre_pic(){
    index --;
    if(index < 0){
      index = 4;
    }
    showpoint();
    var newLeft;
     if(list.style.left ==="0px"){
       newLeft = "-4904";        
     }else{
       newLeft = list.offsetLeft+1226;
     }
     
     list.style.left = newLeft +'px';
     // console.log(newLeft);
  }
  //给轮播图添加定时器
  var timer=null;
  function autoPlay(){
    timer = setInterval(function(){
      next_pic();
    },2000)
  }
  autoPlay();
  list.onmouseover = function(){
    // alert("我移入了鼠标");
    clearInterval(timer);
  }
  list.onmouseout = function(){
    autoPlay();
  }

//小圆点
  var points = document.getElementsByClassName("point");
  // alert(points.length);
  var index=0;
  
  function clearActive(){
    for(var i=0;i<points.length;i++){
      points[i].className = "point";
    }
  }
  function showpoint(){
       clearActive();
       points[index].className = "point active";
  }


 
   for (var i = 0, len = points.length; i < len; i++){
            (function(i){
                points[i].onclick = function () {
                    var dis = index - i;
                    // alert(dis);
                    // if(index == 4 && list.offsetLeft!==-6130){
                    //     dis = dis - 5;     
                    // }
                    //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
                    // if(index == 0 && list.offsetLeft!== -1226){
                    //     dis = 5 + dis;
                    // }
                    // list.style.left = (list.style.left +  dis * 1226)+"px";
                     list.style.left = (list.offsetLeft +  dis * 1226)+"px";
                    index = i;
                    // alert(dis);
                    showpoint();
                    
                }
            })(i);            
        }




</script>

Principle: It
is not difficult to implement a carousel diagram. The general idea: first create a div, limit its width and height, overflow: hidden, and set its position to relative. Then create a div with pictures, the width is the total width of all pictures, and set its position to absolute, and make the content float, so that all pictures are in one line. Then in order to achieve seamless scrolling, it is necessary to add a transition picture at the beginning and the end. First add two buttons to enable manual rotation, and then only need to add a timer to automatically rotate in one direction, because users sometimes need to view details, so when the mouse enters, clear the timer and slide out Re-timing play. In order to have a better user experience, we add a row of small dots below so that the user can clearly know where they are now. Finally, the closure allows users to switch pictures directly by clicking the small dots