呼吸轮播

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

一、淡入淡出(同时执行)


二、淡入淡出(先淡出后淡入)



代码分析:

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

你可能感兴趣的:(js,jquery,动画效果,呼吸轮播)