以下是 jQuery Tab标签自动切换js特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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=gb2312" />
<title>jQuery Tab��ǩ�Զ��л�</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</head>
<body>
<div class="box">
<div class="bleft">
<div class="bcon">
<!-- ������� -->
<h1><span id="list_mark"><em></em><em></em><em></em></span><b>��Ʒ�Ƽ�</b></h1>
<ul class="list1">
<li>
<a href="#"><img src="images/pic_1.jpg" /></a>
<p><a href="#">1-1</a></p>
</li>
<li>
<a href="#"><img src="images/pic_1.jpg" /></a>
<p><a href="#">1-2</a></p>
</li>
<li>
<a href="#"><img src="images/pic_1.jpg" /></a>
<p><a href="#">1-3</a></p>
</li>
<li>
<a href="#"><img src="images/pic_1.jpg" /></a>
<p><a href="#">1-4</a></p>
</li>
<li>
<a href="#"><img src="images/pic_1.jpg" /></a>
<p><a href="#">1-5</a></p>
</li>
<li>
<a href="#"><img src="images/pic_1.jpg" /></a>
<p><a href="#">1-6</a></p>
</li>
<li>
<a href="#"><img src="images/pic_1.jpg" /></a>
<p><a href="#">1-7</a></p>
</li>
<li>
<a href="#"><img src="images/pic_1.jpg" /></a>
<p><a href="#">1-8</a></p>
</li>
</ul>
<ul class="list1">
<li>
<a href="#"><img src="images/pic_2.jpg" /></a>
<p><a href="#">2-1</a></p>
</li>
<li>
<a href="#"><img src="images/pic_2.jpg" /></a>
<p><a href="#">2-2</a></p>
</li>
<li>
<a href="#"><img src="images/pic_2.jpg" /></a>
<p><a href="#">2-3</a></p>
</li>
<li>
<a href="#"><img src="images/pic_2.jpg" /></a>
<p><a href="#">2-4</a></p>
</li>
<li>
<a href="#"><img src="images/pic_2.jpg" /></a>
<p><a href="#">2-5</a></p>
</li>
<li>
<a href="#"><img src="images/pic_2.jpg" /></a>
<p><a href="#">2-6</a></p>
</li>
<li>
<a href="#"><img src="images/pic_2.jpg" /></a>
<p><a href="#">2-7</a></p>
</li>
<li>
<a href="#"><img src="images/pic_2.jpg" /></a>
<p><a href="#">2-8</a></p>
</li>
</ul>
<ul class="list1">
<li>
<a href="#"><img src="images/pic_3.jpg" /></a>
<p><a href="#">3-1</a></p>
</li>
<li>
<a href="#"><img src="images/pic_3.jpg" /></a>
<p><a href="#">3-2</a></p>
</li>
<li>
<a href="#"><img src="images/pic_3.jpg" /></a>
<p><a href="#">3-3</a></p>
</li>
<li>
<a href="#"><img src="images/pic_3.jpg" /></a>
<p><a href="#">3-4</a></p>
</li>
<li>
<a href="#"><img src="images/pic_3.jpg" /></a>
<p><a href="#">3-5</a></p>
</li>
<li>
<a href="#"><img src="images/pic_3.jpg" /></a>
<p><a href="#">3-6</a></p>
</li>
<li>
<a href="#"><img src="images/pic_3.jpg" /></a>
<p><a href="#">3-7</a></p>
</li>
<li>
<a href="#"><img src="images/pic_3.jpg" /></a>
<p><a href="#">3-8</a></p>
</li>
</ul>
<!-- ������� -->
</div>
</div>
</div>
</body>
</html>
JS代码(zzsc.js):
$(document).ready(function(){
$('#list_mark em:first').addClass('emon');
$('.list1:first').css('display','block');
autoroll();
hookThumb();
}
)var i=-1;
//第i+1个tab开始var offset = 3000;
//轮换时间var timer = null;
function autoroll(){
n = $('#list_mark em').length-1;
i++;
if(i > n){
i = 0;
}
slide(i);
timer = window.setTimeout(autoroll,offset);
}
function slide(i){
$('#list_mark em').eq(i).addClass('emon').siblings().removeClass('emon');
$('.list1').eq(i).css('display','block').siblings('.list1').css('display','none');
}
function hookThumb(){
$('#list_mark em').hover(function(){
if(timer){
clearTimeout(timer);
i = $(this).prevAll().length;
slide(i);
}
}
,function(){
timer = window.setTimeout(autoroll,offset);
this.blur();
return false;
}
);
}
CSS代码(style.css):
/* CSS Document */
*{margin:0;padding:0;font-size:12px;}
body{background:none;}
input,button,select,textarea{outline:none;}
ul,li,dl,ol{list-style:none;}
img{border:none;}
a{color:#666;text-decoration:none;}
.box{width:700px;margin:0 auto;}
.bcon{border:1px solid #eee;margin:30px auto;}
.bcon h1{border-bottom:1px solid #eee;padding:0 10px;}
.bcon h1 b{font:bold 14px/40px '宋体';border-top:2px solid #3492D1;padding:0 8px;margin-top:-1px;display:inline-block;}
.bcon h1 span{margin:15px 0;float:right;}
.bcon h1 span em{width:8px;height:8px;background:#F0F2F3;border:1px solid #E6E9EA;border-radius:10px;margin:0 5px;display:inline-block;cursor:pointer;}
.bcon h1 span em.emon{width:10px;height:10px;background:#00A6EC;border:none;}
.list1{width:698px;height:305px;padding-bottom:12px;overflow:hidden;display:none;}
.list1 li{width:160px;padding:12px 0 0 12px;float:left;}
.list1 li img{width:150px;height:105px;margin:5px;}
.list1 li p{height:24px;font:normal 12px/24px 'Microsoft YaHei';color:#999;text-align:center;overflow:hidden;}
.btm p{font:normal 12px/24px 'Microsoft YaHei';text-align:center;}
分享到QQ
分享到微博
微信扫一扫
