jquery经典实例之图片轮播

太过爱你忘了你带给我的痛 2021-07-24 18:31 400阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="GBK">
        <title>Title</title>
        <style>
            .top{
                border: 1px solid ;
                width: 600px;
                height: 450px;
                margin-left: 30%;
                margin-top: 5%;
            }
            .img{
                width: 600px;
                height: 450px;
            }
            .out .num{
                position: absolute;
                left:0;
                bottom: 20px;
                text-align: center;
                font-size: 0;
                width: 100%;
            }
            .out .num li{
                width: 20px;
                height: 20px;
                background-color: black;
                color: #fff;
                text-align: center;
                line-height: 20px;
                border-radius: 55%;
                display: inline;
                font-size: 18px;
                margin: 0 10px;
                cursor: pointer;
            }
            .out .num li.active{
                background-color: red;
            }
            .left{
                background: cadetblue;
    		    margin-top: -25%;
    		    margin-left: 27%;
    		    padding-top: 14px;
    		    padding-left: 10px;
    		    width: 25px;
    		    height: 35px;
            }
            .right{
                background: cadetblue;
    		    margin-top: -3.5%;
    		    margin-left: 76%;
    		    padding-top: 14px;
    		    padding-left: 10px;
    		    width: 25px;
    		    height: 35px;;
            }
            #left{
                width: 45px;
                height: 45px;
                background-color:red ;
                margin-left: 36%;
                margin-top: -25%;
            }
            #right{
                width: 45px;
                height: 45px;
                margin-left: 66.5%;
                margin-top: -3.65%;
            }
            .hide{
            	display:none;
            }
        </style>
    </head>
    <body>
         <div class="out">
         	 <div class="top">
    	            <img class="img" src="images/1.jpg" alt="">
    	            <img class="img hide" src="images/2.jpg" alt="">
    	            <img class="img hide" src="images/3.jpg" alt="">
    	            <img class="img hide" src="images/4.jpg" alt="">
    	            <img class="img hide" src="images/5.jpg" alt="">
    	        </div>
    	     <ul class="num"></ul>
             <div class="left btn"><</div>
             <div class="right btn">></div>
         </div>
        <script src="jquery-1.5.1.js"></script>
        <script>
    
            $(function(){
    			var size = $(".img").size();//图片的个数
    			//有多少个图片就增加多少个li
    			for (var i= 1;i<=size;i++){
    	               var li="<li>"+i+"</li>";
    	               $(".num").append(li);
    	           }
    	        $(".num li").eq(0).addClass("active");
    	        $(".num li").mouseover(function(){
                   $(this).addClass("active").siblings().removeClass("active");
                   var index=$(this).index();
                   i=index;
                   go_move();
                });
                
    	            
    			function move(){
    				 i++;
    				 if(i>=size) i = 0;//一旦大于等于最大图片数则从0开始
    				 go_move();
    			}
    			
    			function go_move(){
    				 $(".img").each(function(index){
    				 	if(index===i){
    				 		$(this).removeClass("hide");
    				 	}else{
    				 		$(this).addClass("hide");
    				 	}
    				 })
    				 
    				 $(".num li").each(function(index){
    				 	if(index===i){
    				 		$(this).addClass("active");
    				 	}else{
    				 		$(this).removeClass("active");
    				 	}
    				 })
    			}
    			
    			var i=0;
    	        var t=setInterval(move,2500);//创建图片轮播定时任务
    	        
    	        function right(){
    	    		move();
    	        }
    			
    	        function left(){
    	            i--;
    	            if(i==-1){//如果=-1则设置从为最后一张图片
    	                i=size-1;
    	            }
    	            go_move();
    	        }
    	
    			//
    	        $(".top,.num,.left,.right").hover(function(){
    	        	//清除定时器
    	          	 clearInterval(t);
    	        },function(){
    	        	//重建定时器
    	             t=setInterval(move,1500);
    	        });
    	
    	        $(".out .right").click(function(){
    	            right()
    	        });
    	        $(".out .left").click(function(){
    	           left()
    	        })
            
            });
        </script>
    
    </body>
    </html>