会自动播放样子也很经典的jquery选项卡

2024-09-05 12:20:38

字体：大中小

来源：转载

供稿：网友

这个可是比较经典的选项卡啊，不但会自动播放，而且样式也很经典，基于jquery1.3.2的选项卡，结合了淡入淡出物资，感觉挺棒噢，不过代码稍嫌多，希望老手把代码优化一下哦。

<!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><script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script><style type="text/css">body{font-size:9pt}.tab{width:500px;border:#ccc 1px solid;margin:100px;}.tab dl dt{ border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1; margin-bottom:-1px;}.tab dl dt a{float:left;display:block;cursor:pointer;width:60px;height:25px;line-height:25px;text-align:center;background:#f1f1f1;color:#000;}.tab dl dt a.tabActive{background:#fff;color:#333;font-weight:bold;border-bottom:1px solid #fff;position:relative;border-right:1px solid #ccc;border-left:1px solid #ccc;}.tab dl dd{padding:10px;height:200px; clear:both;}</style></head><body><script type="text/javascript">// 选项卡$(function(){	$(".tab dl dt>a:first").addClass("tabActive");	$(".tab dl dd ul").not(":first").hide();	$(".tab dl dt>a").unbind("click").bind("click", function(){		$(this).siblings("a").removeClass("tabActive").end().addClass("tabActive");		var index = $(".tab dl dt>a").index( $(this) );		$(".tab dl dd ul").eq(index).siblings(".tab dl dd ul").hide().end().fadeIn("slow");   });});</script><script type="text/javascript">// 自动轮换选项卡$(document).ready(function(){ $('.tab dl dt a:first').addClass('tabActive'); $('.tab dl dd ul:first').css('display','block'); autoroll(); hookThumb();});var i=-1; //第i+1个tab开始var offset = 2500; //轮换时间var timer = null;function autoroll(){ n = $('.tab dl dt a').length-1; i++; if(i > n){ i = 0; } slide(i);    timer = window.setTimeout(autoroll, offset); }function slide(i){ $('.tab dl dt a').eq(i).addClass('tabActive').siblings().removeClass('tabActive'); $('.tab dl dd ul').eq(i).fadeIn("slow").siblings('.tab dl dd ul').hide(); }function hookThumb(){     $('.tab dl dt a').hover(  function () {    if (timer) {                clearTimeout(timer);    i = $(this).prevAll().length;             slide(i);             }  },  function () {            timer = window.setTimeout(autoroll, offset);              this.blur();                        return false;  }); }</script><div class="tab">	<dl>    	<dt>选项菜单经典标准</dt>		<dd>            <ul>欢迎您</ul>            <ul>Welcome To OurSite</ul>            <ul>你认识我吗？：</ul>            <ul>我们可以认识一下么？</ul>         </dd>	</dl></div></body></html>

上一篇：带有延时功能的基础菜单类（CSS与JS）

下一篇：一个功能综合的CSS滑动门特效代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注