jQuery自动滚动切换特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery自动滚动切换特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery自动滚动切换特</title>
	<link rel="stylesheet" href="reset.css" type="text/css" media="screen" charset="utf-8" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="general.js"></script>
    <title>.: ilovecolors tabs :.</title>
	
</head>
<body>

<div id="block">
	
	<div>
		<h1 class="h">Sample Content</h1>
		<ul class="htabs">
			<li><h2><a href="#design" id="designt">Graphic design</a></h2></li>
			<li><h2><a href="#development" id="developmentt">Development</a></h2></li>
			<li><h2><a href="#freebies" id="freebiest">Freebies</a></h2></li>
		</ul>
		<div class="tabs">
			<div class="tab" id="design"><ul>
				<li><a href="#" >Typography</a></li>
				<li><a href="#" >Typefaces</a></li>
				<li><a href="#" >Painting</a></li>
				<li><a href="#" >Grid systems</a></li>
				<li><a href="#" >Optical balance</a></li>
			</ul></div>
			<div class="tab" id="development">
			<ul>
				<li><span class="bullet">1</span><a href="#" >jQuery rollovers</a></li>
				<li><span class="bullet">2</span><a href="#" target="blank">WordPress plugins</a></li>
				<li><span class="bullet">3</span><a href="#" >jQuery slide menu</a></li>
				<li><span class="bullet">4</span><a href="#" >Web development</a></li>
				<li><span class="bullet">5</span><a href="#" >Content management system</a></li>
			</ul></div>
			<div class="tab bmod" id="freebies">
			<ul>
				<li><span class="bullet">a</span><a href="#" >Icons</a></li>
				<li><span class="bullet">b</span><a href="#" >Free font giveaway</a></li>
				<li><span class="bullet">c</span><a href="#" >Daxion, Tessa, Merlin, Mai</a></li>
				<li><span class="bullet">d</span><a href="#">DOWNLOAD ME</a></li>
				<li><span class="bullet">e</span><a href="#" >ILC Thickbox, ILC FLVBox</a></li>
			</ul></div>
		</div>
	</div><br />

<br /><br />

</div>
</body>
</html>

JS代码(general.js):

//By ilovecolors.com.ar//www.ilovecolors.com.ar/rotating-jquery-tabs///array to store IDs of our tabsvar tabs = [];
	//index for arrayvar ind = 0;
	//store setInterval referencevar inter;
	//change tab and highlight current tab titlefunction change(stringref){
	//hide the other tabsjQuery('.tab:not(#' + stringref + ')').hide();
	//show proper tab,catch IE6 bugif (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0")jQuery('.tab#' + stringref).show();
	elsejQuery('.tab#' + stringref).fadeIn();
	//clear highlight from previous tab titlejQuery('.htabs a:not(#' + stringref + 't)').removeClass('select');
	//highlight currenttab titlejQuery('.htabs a[href=#' + stringref + ']').addClass('select');
}
function next(){
	//call change to display next tabchange(tabs[ind++]);
	//if it's the last tab,clear the indexif(ind >= tabs.length)ind = 0;
}
jQuery(document).ready(function(){
	//store all tabs in arrayjQuery(".tab").map(function(){
	tabs[ind++] = jQuery(this).attr("id");
}
)//set index to next element to fadeind = 1;
	//initialize tabs,display the current tabjQuery(".tab:not(:first)").hide();
	jQuery(".tab:first").show();
	//highlight the current tab titlejQuery('#' + tabs[0] + 't').addClass('select');
	//handler for clicking on tabsjQuery(".htabs a").click(function(){
	//if tab is clicked,stop rotatingclearInterval(inter);
	//store reference to clicked tabstringref = jQuery(this).attr("href").split('#')[1];
	//display referenced tabchange(stringref);
	return false;
}
);
	//start rotating tabsinter = setInterval("next()",1000);
}
);

CSS代码(style.css):

/* By ilovecolors.com.ar * * http://www.ilovecolors.com.ar/rotating-jquery-tabs/ */
body{height:100%;width:100%;font:0.75em Arial,Helvetica,sans-serif;}
a{color:#000;text-decoration:none;}
a:hover{color:#d00;}
#block{margin:15px auto 0;width:285px;padding-right:5px;padding-left:5px;clear:both;overflow:hidden;border:10px solid #eee;}
.h{font:1.500em Fontin,Georgia,"Times New Roman",Times,serif;padding:13px 0 10px 5px;color:#666;font-size:1.417em;border-bottom:1px solid #eee;text-transform:uppercase;letter-spacing:1px;}
.htabs{overflow:hidden;}
.htabs h2 a{font-size:0.917em;font-weight:bold;padding:7px;/*color:#d00;*/
font-family:"museo 700","goodpro-widelight";}
.htabs h2 a:hover{/*color:#000;*/
}
.htabs li{float:left;margin-top:2px;padding:3px 2px 0 0;overflow:hidden;}
.tabs .bullet{border-right:1px solid #e00;color:#d00;font:bold 1em Georgia,"Times New Roman",Times,serif;margin:0px 4px 4px 0;padding-right:4px;clear:right;display:block;float:left;height:17px;overflow:hidden;text-align:right;width:10px;}
.bmod .bullet{background-color:#fff;margin:-9px 6px 0 -10px;padding:8px;}
.tabs{margin-top:2px;overflow:hidden;}
.tabs li{background-color:#EEEEEE;clear:both;margin:4px 0;padding:9px;font-family:"NuvoOT-medi";}
.tabs li a:hover{padding-left:1px;}
.select{color:#d00;}

附件:下载该文件资源,减少时间成本(增值服务)