使用jQuery实现轮播图

红太狼 2022-12-02 15:06 135阅读 0赞

轮播图切换大致分为以下几个步骤  
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"><</a>
      <a href="javascript:;" id="next" class="arrow">></a>
    </div>
    	</body>
    </html>