jq 呼吸轮播图

最新推荐文章于 2020-09-02 22:47:33 发布

神奇大叔

最新推荐文章于 2020-09-02 22:47:33 发布

阅读量201

点赞数

分类专栏： jQuery 网页制作案例

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103506835

版权

网页制作案例同时被 2 个专栏收录

41 篇文章 3 订阅

订阅专栏

jQuery

34 篇文章 1 订阅

订阅专栏

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

代码示例：

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

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq 呼吸轮播图

问题:淡入淡出时间清除动画累积代码示例：<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0...
复制链接

扫一扫