呼吸轮播

原文: 呼吸轮播

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

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

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

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

代码分析：

1. html代码如下：

扫描二维码关注公众号，回复： 6116556 查看本文章

<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");
		});
	}
}

猜你喜欢