基于jquery幻灯片淡入淡出特效代码

作者：简简单单 2013-08-01

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#bannerimg {
	list-style-type:none;
	padding:0;
	margin:0;
	
	
	margin:0 auto;
}
#bannerimg li img{
	padding:0;
	margin:0;
	
	
	position:absolute;
}
#image_num {
	z-index:4;
	list-style-type:none;
	position:absolute;
	margin-top:-38px;
	margin-left:600px;
}
#image_num li {
	float:left;
	padding:2px 6px;
	border:1px solid #d8c9ce;
	background:#fff;
	margin:0 2px;
}
#image_num li a {
	text-decoration:none;
	color:#9c9c9c;
	font-weight:bold;
	font-size:14px;
}
</style>
<body>
<ul id="bannerimg">
  <li><a href=""><img  id="img_0" style="z-index:3;" src="https://img.111com.net/get_pic/2013/08/01/20130801071015689.jpg" width="780" height="260"/></a></li>
  <li><a href=""><img  id="img_1" style="z-index:2; "src="https://img.111com.net/get_pic/2013/08/01/2013080107101977.jpg" width="780" height="260"/></a></li>
  <li><a href=""><img  id="img_2" style="z-index:1;" src="https://img.111com.net/get_pic/2013/08/01/20130801071021743.jpg" width="780" height="260"/></a></li>
</ul>
<ul id="image_num">
  <li><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
   var i = 0;
   var time = 3000;
   var len = $("#bannerimg li").length;
   $("#image_num li").eq(0).<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>("background","#f00");
   
   function showimg(){
	   $("#img_"+i).animate({opacity:0},600);
	   i++;
	   if(i==len) i=0;
       $("#img_"+i).animate({opacity:1},600); 
	   $("#image_num li").eq(i).css("background","#f00").siblings().css("background","#fff");
	   }
   timer=setInterval(showimg,time); 
   
    $(function(){  
	 $('#image_num li').mouseover(function(){
		   clearInterval(timer);
		   $(this).css("background","#f00").siblings().css("background","#fff");
		   $("#bannerimg li img").eq($(this).index()).animate({opacity:1},600);	
		});
		
		$('#image_num li').mouseout(function(){
				 $("#bannerimg li img").eq($(this).index()).animate({opacity:0},600);
				 timer=setInterval(showimg,time); 
	    });
	   })
   
</script></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

基于jquery幻灯片淡入淡出特效代码

相关文章

精彩推荐