js自动轮播

在这里插入图片描述 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>

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

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>

原理:
实现一个轮播图还是不难的，大体思路：先创建一个div，限定其宽度和高度，overflow：hidden，且设置其position为relative。然后创建一个装图片的div，宽度为所有图片的总宽度，且设置其position为absolute，并且使其中的内容浮动，这样所有的图片就处于一行中。然后为了实现无缝滚动，所以需要在首尾分别添加一张过渡图片。先添加两个按钮，使其可以手动轮播，然后只需要添加一个定时器使其朝一个方向自动轮播即可，因为用户有时需要查看详情，所以当鼠标进入时就clear定时器，滑出再定时播放。为了更好地用户体验，我们再下面添加了一排小圆点，用户可以清楚地知道现在所处的位置，最后，利用闭包使得用户可以直接通过点击小圆点切换图片

猜你喜欢