jquery滑动选项卡自动切换鼠标滑过选项卡标签滑动切换选项卡



125 496 166



特效描述:滑动选项卡 自动切换 鼠标滑过 选项卡标签 滑动切换,

代码结构

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

加群请备注:从官网了解到