jq 呼吸轮播图

小灰灰 2021-07-25 02:31 476阅读 0赞

问题:  
淡入淡出时间  
清除动画累积

代码示例：

<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * { 
                margin: 0;
                padding: 0
            }
    
            .box { 
                width: 672px;
                height: 320px;
                position: relative;
                margin: 20px auto;
            }
    
            ul { 
                list-style: none;
            }
    
            .imgs { 
                position: relative;
                width: 672px;
                height: 320px;
            }
    
            .box .imgs li { 
                position: absolute;
                display: none;
            }
    
            .box .imgs li.select { 
                display: block;
            }
    
            .btns span { 
                position: absolute;
                width: 55px;
                height: 55px;
                top: 137.5px;
            }
    
            .btns .left { 
                left: 10px;
                background-image: url("img/slide-btnL.png");
            }
    
            .btns .right { 
                right: 10px;
                background-image: url("img/slide-btnR.png");
            }
    
            .circles { 
                position: absolute;
                bottom: 10px;
                text-align: center;
                width: 100%;
            }
    
            .circles li { 
                width: 15px;
                height: 15px;
                display: inline-block;
                background-color: orange;
                border-radius: 50%;
                cursor: pointer;
            }
    
            .circles li.select { 
                background-color: deepskyblue;
            }
        </style>
        <script src="js/jquery-3.4.1.js"></script>
    </head>
    <body>
    <div class="box">
        <div class="imgs">
            <ul>
                <li class="select"><a href="#"><img src="img/aaa.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/bbb.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/ccc.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/ddd.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/eee.jpg" alt=""/></a></li>
            </ul>
        </div>
        <div class="btns">
            <span class="left"></span>
            <span class="right"></span>
        </div>
        <div class="circles">
            <ul>
                <li class="select"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <script>
    	var lis=$('.circles li')
    	var imgs=$(".imgs li")
    	var ids=0;
    	
    	//自动播放
    	setInterval(function(){ 
    		if(imgs.is(":animated")){ 
    			return;
    		}
    		imgs.eq(ids).fadeOut(2000);
    		ids++;
    		changeImg();
    	},2000);
    	
    	//原点绑定事件
    	lis.mouseenter(function(){ 
    		//处于动画状态不会执行下列操作
    		if(imgs.is(":animated")){ 
    			return;
    		}
    		imgs.eq(ids).fadeOut(2000);
    		//拿到原点对应下标
    		 ids=$(this).index();
    		 changeImg();
    	});
    	
    	//按钮控制图片
    	$(".left").click(function(){ 
    		//处于动画状态不会执行下列操作
    		if(imgs.is(":animated")){ 
    			return;
    		}
    		
    		//id改变前图片淡出
    		 imgs.eq(ids).fadeOut(2000);  //会自动将dispaly属性置为none
    		 
    		 ids--;
    		 changeImg();
    
    	})
    
    	
    	$(".right").click(function(){ 
    		//处于动画状态不会执行下列操作
    		if(imgs.is(':animated')){ 
    			return;   
    		}
    		
    		//id改变前图片淡出
    		 imgs.eq(ids).fadeOut(2000);  //会自动将dispaly属性置为none
    		 
    		 ids++;
    		 
    		 changeImg();
    		 
    		
    	})
    	
    	//函数封装
    	function changeImg()
    	{ 
    			if(ids>imgs.length-1)  
    		 { 
    		 	ids=0;
    		 }
    		 	if(ids<0)  
    		 { 
    		 	ids=imgs.length-1;
    		 }
    		 
    		//id改变后图片淡入
    		 imgs.eq(ids).fadeIn(2000);
    		 //清除之前样式
    		lis.removeClass("select");
    		//添加当前样式
    		lis.eq(ids).addClass("select");
    		 
    	}
    	
    	
    </script>
    </body>
    </html>