jquery滑動選項卡自動切換鼠標滑過選項卡標簽滑動切換選項卡



128 511 171



特效描述:滑動選項卡 自動切換 鼠標滑過 選項卡標簽 滑動切換,

代碼結構

1. 引入CSS

<link href="commom/style.css" rel="stylesheet" type="text/css" media="all" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tabbedContent.js"></script>

3. HTML代碼

<div class="tabbox">
	<ul class="nav-list">
		<li mid="0" class="nav-0 nav-cus-0"><span><a href="#">畜牧</a></span></li>
		<li mid="1" class="nav-1"><span><a href="#">電梯</a></span></li>
		<li mid="2" class="nav-2"><span><a href="#">制衣</a></span></li>
	</ul>
	<div class="contant">
		<div class="inner">
			<div class="contant-con con_list" mid="0" style="background:url(./images/contant-bg.jpg) no-repeat left">
				<div class="contant-left">
					<div class="contant-left-top">
						<h6 class="con-news"><a href="#">資訊</a></h6> 
					</div>
					<div class="contant-left-bottom">
						<ul>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全111</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
						</ul>
					</div>
				</div>
				<div class="contant-center">
					<div class="contant-center-top">
						<ul class="tabs parttitlee280 hightbg">
							<div class="moving_bg">&nbsp;</div>
							<li class="tab_item">求購</li>
							<li class="tab_item">供應</li>
						</ul>
						<p class="xiaoxi">當前有<span>1506</span>條求購信息</p>
					</div>
					<div class="contant-left-bottom hei226">
						<div class="slide_content wid290"> 
							<div class="tabslider">
								<ul class="ullist_dott">
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
								</ul>
								<ul class="ullist_dott">
									<li><span>【新聞動態】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
								</ul>
							</div>
						</div> 
					</div>
				</div>
				<div class="contant-right">
					<div class="contant-center-top">
						<ul class="tabs parttitlee280 hightbg">
							<div class="moving_bg">&nbsp;</div>
							<li class="tab_item">VIP企業</li>
							<li class="tab_item">最新加入</li>
						</ul>
						<p class="xiaoxi">當前有<span>1506</span>條求購信息</p> 
					</div>
					<div class="contant-left-bottom hei226 wid290">
						<div class="slide_content wid290">
							<div class="tabslider">
								<ul class="ullist_dott wid290">
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
								</ul>
								<ul class="ullist_dott wid290">
									<li><span>【新聞動態】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
								</ul>
							</div>
						</div> 
					</div>
				</div>
			</div>
			<div class="contant-con con_list" mid="1" style="background:url(./images/bg.png) -14px 0px;">
				<div class="contant-left">
					<div class="contant-left-top">
						<h6 class="con-news"><a href="#">資訊</a></h6> 
					</div>
					<div class="contant-left-bottom">
						<ul>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全222</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
						</ul>
					</div>
				</div>
				<div class="contant-center">
					<div class="contant-center-top">
						<ul class="tabs parttitlee280 hightbg">
							<div class="moving_bg bg_or01">&nbsp;</div>
							<li class="tab_item">求購</li>
							<li class="tab_item">供應</li>
						</ul>
						<p class="xiaoxi">當前有<span>1506</span>條求購信息</p>
					</div>
					<div class="contant-left-bottom hei226">
						<div class="slide_content wid290"> 
							<div class="tabslider">
								<ul class="ullist_dott">
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
								</ul>
								<ul class="ullist_dott">
									<li><span>【新聞動態】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
								</ul>
							</div>
						</div> 
					</div>
				</div>
				<div class="contant-right">
					<div class="contant-center-top">
						<ul class="tabs  parttitlee280 hightbg">
							<div class="moving_bg bg_or01">&nbsp;</div>
							<li class="tab_item" >VIP企業</li>
							<li class="tab_item" >最新加入</li>
						</ul>
						<p class="xiaoxi">當前有<span>1506</span>條求購信息</p> 
					</div>
					<div class="contant-left-bottom hei226 wid290">
						<div class="slide_content wid290">
							<div class="tabslider">
								<ul class="ullist_dott wid290">
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
								</ul>
								<ul class="ullist_dott wid290">
									<li><span>【新聞動態】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
								</ul>
							</div>
						</div> 
					</div>
				</div>
			</div>
			<div class="contant-con con_list"  mid="2" style="background:url(./images/bg.png) -12px -275px;">
				<div class="contant-left">
					<div class="contant-left-top">
						<h6 class="con-news"><a href="#">資訊</a></h6> 
					</div>
					<div class="contant-left-bottom">
						<ul>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電333</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
							<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
						</ul>
					</div>
				</div>
				<div class="contant-center">
					<div class="contant-center-top">
						<ul class="tabs parttitlee280 hightbg">
							<div class="moving_bg bg_or02">&nbsp;</div>
							<li class="tab_item">求購</li>
							<li class="tab_item" >供應</li>
						</ul>
						<p class="xiaoxi">當前有<span>1506</span>條求購信息</p>
					</div>
					<div class="contant-left-bottom hei226">
						<div class="slide_content wid290"> 
							<div class="tabslider">
								<ul class="ullist_dott">
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
								</ul>
								<ul class="ullist_dott">
									<li><span>【新聞動態】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
								</ul>
							</div>
						</div> 
					</div>
				</div>
				<div class="contant-right">
					<div class="contant-center-top">
						<ul class="tabs  parttitlee280 hightbg">
							<div class="moving_bg bg_or02">&nbsp;</div>
							<li class="tab_item" >VIP企業</li>
							<li class="tab_item" >最新加入</li>
						</ul>
						<p class="xiaoxi">當前有<span>1506</span>條求購信息</p>
					</div>
					<div class="contant-left-bottom hei226 wid290">
						<div class="slide_content wid290">
							<div class="tabslider">
								<ul class="ullist_dott wid290">
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
								</ul>
								<ul class="ullist_dott wid290">
									<li><span>【新聞動態】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全大電梯</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全梯人大</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
									<li><span>【行業資訊】</span><a href="#">人大常委會立法保障電梯安全人大電</a></li>
								</ul>
							</div>
						</div> 
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
var n_c_ser = 0;//設置初始值為0;
function t_player(cur){
	$('ul.nav-list > li').eq(n_c_ser).removeClass("nav-cus-"+n_c_ser);
	if(cur==null){
		n_c_ser = ++n_c_ser % 3;   //遞加函數
	}else{
		n_c_ser = cur;
	}
	if(n_c_ser !=0 ){
	}
	$('.inner').animate({marginLeft:(-1 * n_c_ser * 960) + 'px'});//下面內容的動畫效果左移動960px;
	$('ul.nav-list > li').eq(n_c_ser).addClass("nav-cus-"+n_c_ser);
}
var n_t = setInterval('t_player()', 5000);//每隔5秒 執行一次
$('ul.nav-list > li span').hover(function(){//當我鼠標懸浮上去的時候
	var self = this;
	clearInterval(n_t);   //清除動畫
	$('.inner').stop();
	var mid = $(this).parent().index()
	$('ul.nav-list > li').eq(n_c_ser).addClass("nav-cus-"+n_c_ser);
	t_player(mid);
},function(e){
	n_t = setInterval('t_player()', 5000);//當鼠標離開的時候  繼續執行上面循環的函數
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 其他 滑動選項卡 滑動切換 文字滑動 文字滑塊 選項卡自動切換 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子