<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>基于jQuery的可用于选项卡及幻灯的切换插件@Mr.Think</title>
<link rel="stylesheet" href="base.css" />
<meta name="author" content="Mr.Think又名青鸟简称i" />
<meta name="keywords" content="i,Mr.Think,前端开发,WEB前端,前端技术,前端开发,WEB前端开发,用户体验,网站策划,网站优化,青鸟,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鸟的博客,PHP爱好者" />
<meta name="description" content="Mr.Think的博客,中文网名青鸟,现专注于WEB前端开发,同时也是一位PHP的爱好者.爱思考,有点代码洁癖,生吃过螃蟹腿,喜好肉食.这里是我记录知识与生活琐事的地方." />
<link rel="pingback" href="http://mrthink.net/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="Mr.Think的博客 RSS Feed" href="http://mrthink.net/feed/" />
<style>
/* clear both */
.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden}
.clearfix{zoom:1; display:inline-block; _height:1px}
*html .clearfix{height:1%}
*+html .clearfix{height:1%}
.clearfix{display:block}
/* index slide */
.index_slide{float:left;width:744px;height:315px;margin:5px 10px 10px 5px;_margin-bottom:5px}
.index_slide .box{float:left;overflow:hidden;width:365px;height:290px;;padding:10px;border:1px solid #d1d1d1}
.index_slide .box .show{position:relative;display:none;zoom:1;height:290px}
.index_slide .box .show img{width:365px;height:200px}
.index_slide .box .show h3{border-bottom:1px dashed #d1d1d1}
.index_slide .box .show h3 a{font-size:16px;line-height:2.2}
.index_slide .box .show li{line-height:1.8}
.index_slide .box .show li em{color:#888;margin-right:3px}
.index_slide .box .show .more{position:absolute;right:0;bottom:0}
.index_slide ul.nav{float:right;width:355px}
.index_slide ul.nav li{height:60px;background:url(20110320sprite.gif) 0 -75px no-repeat;margin-bottom:8px;padding:6px 6px 6px 14px}
.index_slide ul.nav li.cur{background-position:0 0}
.index_slide ul.nav li img{display:block;float:left;clear:both;width:108px;height:60px;margin-right:5px}
.index_slide ul.nav li h3{line-height:2}
.settab{float:right;width:310px}
.settab h2{background:#a40000;font-size:12px; color:#fff;text-align:center; ;line-height:25px;margin:10px 0 10px}
ul.tabnav{width:300px;height:25px;margin-left:20px}
ul.tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer}
ul.tabnav li.hover{background:#047}
.tabbox{width:300px;height:100%;border:2px solid #047}
.tabbox div{display:none;margin:10px;line-height:20px}
</style>
</head>
<body>
<div id="d_head">
<h1>Mr.Think的博客<em>可自由转载及使用,但请注明出处.</em></h1>
<h2><span><a title="订阅Mr.Think的博客" href="http://mrthink.net/feed/">RSS Feed</a></span>@专注Web前端技术, 热爱Php, 崇尚简单生活的凡夫俗子.</h2>
</div>
<div class="return">返回文章页:<a href="http://mrthink.net/jq-settab-slide/">基于jQuery的可用于选项卡及幻灯的切换插件</a></div>
<!--DEMO start-->
<div id="demo">
<div class="index_slide" id="J_indexSlide">
<div class="box" id="J_indexSlideBox">
<!--php:div.showoff循环四次-->
<div class="show" style="display:block">
<a href="#"><img src="d_01.jpg" alt="调用右侧对应标题" title="调用右侧对应标题" /></a>
<h3><a href="#">西安春季旅游:青龙寺踏青赏樱花</a></h3>
<ul class="mt10">
<li><em>【线路】</em><a href="#">重游情人故地 七夕情话几许</a></li>
<li><em>【美食】</em><a href="#">一个路痴在西安的七日游攻略</a></li>
</ul>
<div class="more"><a href="#" title="更多攻略...">» 更多攻略</a></div>
</div>
<div class="show">
<a href="#"><img src="d_02.jpg" alt="调用右侧对应标题" title="调用右侧对应标题" /></a>
<h3><a href="#">穿越历史长廊——兔子精的西安五日游</a></h3>
<ul class="mt10">
<li><em>【攻略】</em><a href="#">西安王莽乡 古城赏荷好风光</a></li>
<li><em>【攻略】</em><a href="#">西安古都一日吃喝玩乐</a></li>
</ul>
<div class="more"><a href="#" title="更多攻略...">» 更多攻略</a></div>
</div>
<div class="show">
<a href="#"><img src="d_03.jpg" alt="调用右侧对应标题" title="调用右侧对应标题" /></a>
<h3><a href="#">西北逆行-第三站:西安-大雁塔</a></h3>
<ul class="mt10">
<li><em>【攻略】</em><a href="#">五天恍惚五千年</a></li>
<li><em>【攻略】</em><a href="#">一日看尽长安花</a></li>
</ul>
<div class="more"><a href="#" title="更多攻略...">» 更多攻略</a></div>
</div>
<div class="show">
<a href="#"><img src="d_04.jpg" alt="调用右侧对应标题" title="调用右侧对应标题" /></a>
<h3><a href="#">戶县探密寻画访真人 来一场农村盛宴</a></h3>
<ul class="mt10">
<li><em>【攻略】</em><a href="#">在时间的灰烬里,梦呓般漂泊</a></li>
<li><em>【攻略】</em><a href="#">西安自助游的几点提示</a></li>
</ul>
<div class="more"><a href="#" title="更多攻略...">» 更多攻略</a></div>
</div>
</div>
<ul class="nav" id="J_indexSlideNav">
<li>
<a href="#"><img src="d_01.jpg" alt="调用下面右侧标题" title="调用右侧对应标题" /></a>
<h3><a href="#">西安春季旅游:青龙寺踏青赏樱花</a></h3>
<p>那些消逝了的岁月仿佛隔着一块积着灰尘的玻璃看得到,抓不着...</p>
</li>
<li>
<a href="#"><img src="d_02.jpg" alt="调用下面右侧标题" title="调用右侧对应标题" /></a>
<h3><a href="#">穿越历史长廊——兔子精的西安五日游</a></h3>
<p>即使是不懂什么历史,也能在这个城市的每个角落感受到那厚厚的历史沉淀。</p>
</li>
<li>
<a href="#"><img src="d_03.jpg" alt="调用下面右侧标题" title="调用右侧对应标题" /></a>
<h3><a href="#">西北逆行-第三站:西安-大雁塔</a></h3>
<p>西安,很精致,很大气,在兰州跟人学到的一个形容城市的词语。</p>
</li>
<li>
<a href="#"><img src="d_04.jpg" alt="调用下面右侧标题" title="调用右侧对应标题" /></a>
<h3><a href="#">戶县探密寻画访真人 来一场农村盛宴</a></h3>
<p>有点儿喘不过气?是不是感觉生活有点儿乏味?想不想要吸点清新的空气?</p>
</li>
</ul>
</div>
<div class="settab">
<h2>普通的选项卡</h2>
<ul class="tabnav" id="J_setTabANav">
<li>jQuery技术</li>
<li>CSS技术</li>
<li>xhtml技术</li>
</ul>
<div class="tabbox" id="J_setTabABox">
<div style="display:block">jQuery技术在这里显示[email protected].<br />jQuery技术在这里显示[email protected].<br />jQuery技术在这里显示[email protected].<br /></div>
<div>CSS技术在这里显示[email protected].<br />CSS技术在这里显示[email protected].<br />CSS技术在这里显示[email protected].<br /></div>
<div>xhtml技术在这里显示[email protected].<br />CSS技术在这里显示[email protected].<br />CSS技术在这里显示[email protected].<br /></div>
</div>
<!--//选项卡A一-->
<h2>自动切换的选项卡</h2>
<ul class="tabnav" id="J_setTabBNav">
<li>jQuery技术</li>
<li>CSS技术</li>
<li>xhtml技术</li>
</ul>
<div class="tabbox" id="J_setTabBBox">
<div style="display:block">jQuery技术在这里显示[email protected].<br />jQuery技术在这里显示[email protected].<br />jQuery技术在这里显示[email protected].<br /></div>
<div>CSS技术在这里显示[email protected].<br />CSS技术在这里显示[email protected].<br />CSS技术在这里显示[email protected].<br /></div>
<div>xhtml技术在这里显示[email protected].<br />CSS技术在这里显示[email protected].<br />CSS技术在这里显示[email protected].<br /></div>
</div>
<!--//选项卡A一-->
</div>
</div>
<!--DEMO end-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
/*******************************
* @author Mr.Think
* @author blog http://mrthink.net/
* @2011.02.20
* @可自由转载及使用,但请注明版权归属
*******************************/
(function($){
$.fn.WIT_SetTab=function(iSet){
/*
* 多功能选项卡@Mr.Think
* Nav: 导航钩子;
* Field:切换区域
* K:初始化索引;
* CurCls:高亮样式;
* Auto:是否自动切换;
* AutoTime:自动切换时间;
* OutTime:淡入时间;
* InTime:淡出时间;
* CrossTime:鼠标无意识划过时间
* Ajax:是否开启ajax
* AjaxFun:开启ajax后执行的函数
*/
iSet=$.extend({Nav:n