使用jQuery实现轮播图_每过三秒轮播图3d移动-CSDN博客

本文链接：https://blog.csdn.net/qq_44604924/article/details/108324935

轮播图切换大致分为以下几个步骤
1.点击向左向右的图标，平滑切换到上(下)页
2.进行无限切换，第一页的上一页为最后一页，最后一页的下一页为第一页
3.每隔三秒图片进行一次自动切换
4.圆点随着图片的更新而跟新
5.鼠标进入图片区域时，自动切换停止，移开的时候又自动进行
6.点击圆点进行图片的切换
7.解决因为切换过快产生的bug,即判断图片是否正在移动
具体代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>焦点轮播图</title>
  <style type="text/css">
    /*去除内边距,没有链接下划线*/
    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
    }

    /*让<body>有20px的内边距*/
    body {
      padding: 20px;
    }

    /*最外围的div*/
    #container {
      width: 533px;
      height: 776px;
      overflow: hidden;
      position: relative; /*相对定位*/
      margin: 0 auto;
    }

    /*包含所有图片的<div>*/
    #list {
      width: 3871px; /*7张图片的宽*/
      height: 776px;
      position: absolute; /*绝对定位*/
      z-index: 1; /*???*/
    }

    /*所有的图片<img>*/
    #list img {
      float: left; /*浮在左侧*/
    }

    /*包含所有圆点按钮的<div>*/
    #buttons {
      position: absolute;
      height: 10px;
      width: 100px;
      z-index: 2;
      bottom: 20px;
      left: 250px;
    }

    /*所有的圆点<span>*/
    #buttons span {
      cursor: pointer;
      float: left;
      border: 1px solid #fff;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #333;
      margin-right: 5px;
    }

    /*第一个<span>*/
    #buttons .on {
      background: orangered;
    }

    /*切换图标<a>*/
    .arrow {
      cursor: pointer;
      display: none;
      line-height: 39px;
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      width: 40px;
      height: 40px;
      position: absolute;
      z-index: 2;
      top: 368px;
      background-color: RGBA(0, 0, 0, 0.3);
      color: #fff;
    }

    /*鼠标移到切换图标上时*/
    .arrow:hover {
      background-color: RGBA(0, 0, 0, 0.7);
    }

    /*鼠标移到整个div区域时*/
    #container:hover .arrow {
      display: block; /*显示*/
    }

    /*上一个切换图标的左外边距*/
    #prev {
      left: 20px;
    }

    /*下一个切换图标的右外边距*/
    #next {
      right: 20px;
    }
  </style>
  <script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
  <script type="text/javascript">
  	/*轮播图切换大致分为以下几个步骤
  	 1.点击向左向右的图标，平滑切换到上(下)页
  	 2.进行无限切换，第一页的上一页为最后一页，最后一页的下一页为第一页
  	 3.每隔三秒图片进行一次自动切换
  	 4.圆点随着图片的更新而跟新
  	 5.鼠标进入图片区域时，自动切换停止，移开的时候又自动进行
  	 6.点击圆点进行图片的切换
  	 7.解决因为切换过快产生的bug,即判断图片是否正在移动
  	 * 
  	 * */
  	$(function(){
  		//点击左右切换按钮进行切换,平滑的切换
  		var $container = $("#container");
  		var $list = $("#list");
  		var $prev = $("#prev");
  		var $next = $("#next");
  		var $points = $("#buttons>span");//显示的图片个数
  		var imgCount = $points.length;
  		var TotleDistance = 533;
  		var TotleTime = 500;
  		var itemTime = 50;
  		var index=0;//当前圆点下标
  		var moving=false;//图片是否处于移动中
  		//点击上一页
  		$prev.click(function(){
			Switchover(false);
  		});
  		//点击下一页
  		$next.click(function(){
  			Switchover(true);
  		});
  		//每隔三秒自动滑到下一页
  		var theID;
  		function autoChange(){
  		theID = setInterval(function(){
  			Switchover(true);
  		},3000);
  		}
  		autoChange();
  		//当鼠标进入图片区域时，自动停止切换，鼠标离开后又开始自动切换
  		$container.hover(function(){
  			clearInterval(theID);
  		},function(){
  			autoChange();
  		});
  		
  	 	ClickCircle();
  
  		 
  		//next取true或者false,true为下一张，false为上一张
  		var IntervalID;
  		function Switchover(next){
//			alert($list.offset().left);
  			//解决切换上下页速度过快出现的bug
  			if(moving){//如果正在移动，则直接返回
  				return ;
  			}
  			moving = true;//进入函数说明动画正在移动
  			var currentLeft = $list.position().left;
  			var leftDis;
  			if(typeof next == "boolean"){
  				leftDis = next? -533:533;//要移动的距离
  			}else{
  				leftDis = -533*(next-index);
  			}
  			
  			 
  			var itemDistance = leftDis/(TotleTime/itemTime);
  			var targetLeft = currentLeft+leftDis;
  			//平缓移动，启动定时器
			 IntervalID = setInterval(function(){
				currentLeft +=itemDistance;//移动到该位置

				if(((itemDistance<0)&&(currentLeft<targetLeft)) || ((itemDistance>0)&&(currentLeft>targetLeft))){
					currentLeft=targetLeft;
				}
				
				
				if(currentLeft == targetLeft){
						
					clearInterval(IntervalID);
					//第一页的上一页为最后一页，最后一页的下一页是第一页
					if(currentLeft==0){
						currentLeft = -imgCount*533;
					}
					if(currentLeft==-(imgCount+1)*533){
						currentLeft = -533;
					}
					moving = false;//说明已经移动到指定位置，此时停止移动
				}
			  $list.css("left",currentLeft);
			},itemTime);
			
			updateCircle(next);
  		}//end of switchover
  		
  		//切换页面时，圆点同步更新
	    function updateCircle(next){ 
//	        alert($points[index]);
	    	$points[index].className=" ";
	    	var targetPoint;
	    	if(typeof next == "boolean"){
	    		if(next){
	    			targetPoint = index +1;
	    			if(targetPoint == imgCount){
	    				targetPoint = 0;
	    			}
	    		}else{
	    			targetPoint = index-1;
	    			if(targetPoint==-1){
	    				targetPoint = imgCount-1;
	    			}
	    		}
	    	}else{
	    		targetPoint=next;
	    	}
	    	index = targetPoint;
	    	$points[index].className="on";
	    }//end of updateCircle
	    
	    //点击圆点图标切换对应页
	    function ClickCircle(){
	    	clearInterval(IntervalID);
	    	
	    	for (var i=0;i<imgCount;i++) {
	    		$points[i].index=i;//记录圆点下标
	    		$points[i].onclick = function(){
	    			Switchover(this.index);
	    		}
	    	}
	    }
	    
  	});
  </script>
</head>
<body>
	<div id="container">
  <div id="list" style="left: -533px;">
    <img src="../img/5.jpg" alt="1"/>
    <img src="../img/1.jpg" alt="1"/>
    <img src="../img/2.jpg" alt="2"/>
    <img src="../img/3.jpg" alt="3"/>
    <img src="../img/4.jpg" alt="4"/>
    <img src="../img/5.jpg" alt="5"/>
    <img src="../img/1.jpg" alt="5"/>
  </div>
  <div id="buttons">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
    <span index="4"></span>
    <span index="5"></span>
  </div>
  <a href="javascript:;" id="prev" class="arrow">&lt;</a>
  <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>
	</body>
</html>