码迷,mamicode.com
首页 > 其他好文 > 详细

banner淡出效果

时间:2014-09-16 15:47:40      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:io   ar   div   art   cti   on   c   html   line   

<div class="banner">
		<div class="ban"></div>
		<ul class="ban_bar">
			<li><a href="" img="images/banner.jpg"><img src="images/banner_dadian.png" alt=""></a></li>
			<li><a href="" img="images/banner2.jpg"><img src="images/banner_xiaodian.png" alt=""></a></li>
			<li><a href="" img="images/banner3.jpg"><img src="images/banner_xiaodian.png" alt=""></a></li>
			<li><a href="" img="images/banner4.jpg"><img src="images/banner_xiaodian.png" alt=""></a></li>
		</ul>
	</div>

function banner_start(){

	function changeImg(){
		var strPath = arguments[0];
		$(".banner").css("background","url("+ strPath +") center");

		$(".banner .ban").fadeOut("slow",function(){
			$(".banner .ban").css("background","url("+ strPath +") center");
			$(".banner .ban").show();
		});
	}
	$(".banner li a").click(function(){
		changeImg($(this).attr("img"));
		$(".banner li a img").attr("src","images/banner_xiaodian.png");
		$(this).find("img").attr("src","images/banner_dadian.png");
		return false;
	});

	var i = 1;
	setInterval(function(){
		$(".banner li a")[i].click();
		i++;
		i = i % 4;
	},2000);
	$(".banner li a")[0].click();
}

banner淡出效果

标签:io   ar   div   art   cti   on   c   html   line   

原文地址:http://www.cnblogs.com/wanghongxu/p/3974999.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!