呼吸轮播

最新推荐文章于 2023-02-20 15:17:07 发布

转载最新推荐文章于 2023-02-20 15:17:07 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lonelyxmas/p/10809247.html

博主分享技术视频地址，介绍呼吸轮播是在干蹦轮播基础上改版而来。展示了淡入淡出的两种效果，包括同时执行和先淡出后淡入，并对实现呼吸效果的代码进行分析，主要借助js的fadeOut和fadeIn函数。

呼吸轮播

原文: 呼吸轮播

本人录制技术视频地址：https://edu.youkuaiyun.com/lecturer/1899 欢迎观看。

这一节所介绍的呼吸轮播是在上一节中介绍的干蹦轮播基础上进行改版而产生的。先看看最终的效果。

一、淡入淡出（同时执行）

二、淡入淡出（先淡出后淡入）

代码分析：

1. html代码如下：

<body>
	<div id="container">
		<ul id="content">
			<li class="first"><a href="#"><img src="images/0.jpg"/></a></li>
			<li><a href="#"><img src="images/1.jpg"/></a></li>
			<li><a href="#"><img src="images/2.jpg"/></a></li>
			<li><a href="#"><img src="images/3.jpg"/></a></li>
			<li><a href="#"><img src="images/4.jpg"/></a></li>
		</ul>
		<div id="btn">
			<div id="leftBtn"></div>
			<div id="rightBtn"></div>
		</div>
		<ul id="indicator">
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

	</div>
</body>

2. css代码与上一节讲解的干蹦轮播类似，我就不再叙述了。

3. 这种呼吸效果的实现主要是借助于js中的fadeOut 和 fadeIn 函数。这两个函数是异步执行的，所以实现第一种效果的主要代码如下：

function rightBtnClick(){
	if(!$("#container #content li").is(":animated")){
		$("#container #content li").eq(nowImage).fadeOut(1000);

		if(nowImage == $("#container #content li").length -1){
			nowImage = 0;
		}
		else{
			nowImage++;
		}

		$("#container #content li").eq(nowImage).fadeIn(1000);

		$("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");
	}
}

而现实第二种效果，我们可以借助于 fadeOut 或者 fadeIn 的回调函数，主要实现代码如下：

function rightBtnClick(){
	if(!$("#container #content li").is(":animated")){
		$("#container #content li").eq(nowImage).fadeOut(500,function(){
			if(nowImage == $("#container #content li").length -1){
				nowImage = 0;
			}
			else{
				nowImage++;
			}

			$("#container #content li").eq(nowImage).fadeIn(500);

			$("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");
		});
	}
}

posted on 2019-05-04 18:15 NET未来之路阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/10809247.html