carrossel automático js

área de código html

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

área do código css

<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;
  }

área de código js

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

Princípio: Não
é difícil implementar um diagrama de carrossel. A ideia geral: primeiro crie um div, limite sua largura e altura, overflow: hidden e defina sua posição como relativa. Em seguida, crie um div com imagens, a largura é a largura total de todas as imagens, defina sua posição como absoluta e faça o conteúdo flutuar, de modo que todas as imagens fiquem em uma linha. Então, para conseguir uma rolagem contínua, é necessário adicionar uma imagem de transição no início e no final. Primeiro adicione dois botões para ativar a rotação manual e, em seguida, só precisa adicionar um cronômetro para girar automaticamente em uma direção, porque os usuários às vezes precisam ver os detalhes, então, quando o mouse entrar, limpe o cronômetro e deslize para fora Re-cronometrar o jogo. Para ter uma melhor experiência do usuário, adicionamos uma linha de pequenos pontos abaixo para que o usuário possa saber claramente onde está agora. Por fim, o fechamento permite que os usuários alternem as imagens diretamente clicando nos pequenos pontos