jquery图像幻灯片上下滑动切换特效代码下载


jquery图像幻灯片上下滑动切换特效代码下载
jquery图像幻灯片上下滑动切换特效代码下载以及图像幻灯片、上下滑动切换等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";background:#2a0504;}
/* acttabbox */
.acttabbox{width:990px;height:300px;overflow:hidden;padding:4px;border:solid 1px #690501;background:#541410;margin:40px auto;}
.tabcon{float:left;width:702px;height:300px;overflow:hidden;margin-right:-2px;} 
.tabcon li{width:702px;height:300px;}
.tabcon li img{width:702px;height:300px;float:left}
.tabnav{float:right;width:290px;}
.tabnav li{float:left;position:relative;margin:-1px 0 0 0;height:99px;border:1px solid #000;overflow:hidden;}
.tabnav .cur{border:1px solid #fff;z-index:9;}
</style>
<div class="acttabbox">
	<ul class="tabcon">
		<li><a href="http://www.51qianduan.com/" target="_blank"><img width="702" height="300" src="images/T1XXb8XjtXXXak1cjj-702-300.jpg" alt="敢死队2" /></a></li>
		<li><a href="http://www.51qianduan.com/" target="_blank"><img width="702" height="300" src="images/T1MdL7Xg4cXXak1cjj-702-300.jpg" alt="活埋" /></a></li>
		<li><a href="http://www.51qianduan.com/" target="_blank"><img width="702" height="300" src="images/T1STrHXlVqXXak1cjj-702-300.jpg" alt="复仇者联盟" /></a></li>
	</ul>
	<ul class="tabnav">
		<li class="cur"><a href="http://www.51qianduan.com/" target="_blank"><img width="288" height="99" src="images/T111L6Xe8gXXbCOp6D-288-99.jpg" alt="敢死队2" /></a></li>
		<li><a href="http://www.51qianduan.com/" target="_blank"><img width="288" height="99" src="images/T1xYL6XX4gXXbCOp6D-288-99.jpg" alt="活埋" /></a></li>	
		<li><a href="http://www.51qianduan.com/" target="_blank"><img width="288" height="99" src="images/T1gd2NXd0cXXbCOp6D-288-99.jpg" alt="复仇者联盟" /></a></li>
	</ul> 
</div>
<script type="text/javascript">
$(function(){    
	var index=0,len=$('.tabnav li').length,_timer=null;  
	function showTab(index){			
		$('.tabnav li').eq(index).addClass('cur').siblings().removeClass('cur');				 
		$('.tabcon li').eq(index).stop(true,true).slideDown('slow').siblings().slideUp('slow');
	}
	function auto(){
		timer=setTimeout(function(){
			index=(index+1)%len;
			showTab(index);
			timer=setTimeout(arguments.callee,3500);
		},1000)	
	}
	auto(); 
	$('.tabnav li').mouseenter(function(){
		var index=$(this).index(); 
		showTab(index);	 
	});
	$('.acttabbox').hover(function(){
		clearTimeout(timer);
	},function(){
		auto();
	});
});
</script>

相关推荐

发表评论

相关文章