jquery scroll带导航标签的选项卡图片滚动代码



98 388 130



特效描述:导航标签选项卡 图片滚动代码,

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery1.7.min.js"></script>
<script type="text/javascript" src="js/scroll.1.3.js"></script>

3. HTML代码

<div class="wc960 row rowE">
	<div class="hd clearfix">
		<div class="fl">
			<h2 class="title">热门推荐</h2>
		</div>
		<div class="fr">
			<ul id="tabT04" class="tab-T-3 mt20 clearfix">
				<li class="cur"></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
	<div class="bd mt20">
		<div id="sca1" class="warp-pic-list">
			<div id="wrapBox1" class="wrapBox">
				<ul id="count1" class="count clearfix">
					<li>
						<a href="#2685" class="img_wrap"><img src="./images/95962653.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>通用雪佛兰-赛欧</p>
							<p>威佳福盛4S店</p>
							<p>Tel:<span class="p-num">123727788-3396 </span></p>
						</div>
					</li>
					<li>
						<a href="#2624" class="img_wrap"><img src="./images/95961068.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>进口三菱帕杰罗</p>
							<p>泰菱进口三菱4S店</p>
							<p>Tel:<span class="p-num">123727788-3457 </span></p>
						</div>
					</li>
					<li>
						<a href="#2760" class="img_wrap"><img src="./images/95961317.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>E5</p>
							<p>百达贸易</p>
							<p>Tel:<span class="p-num">123727788-3322</span></p>
						</div>
					</li>
					<li>
						<a href="#2690" class="img_wrap"><img src="./images/95907859.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>POLO</p>
							<p>裕华上联4S店</p>
							<p>Tel:<span class="p-num">123727788-3391</span></p>
						</div>
					</li>
					<li>
						<a href="#2664" class="img_wrap"><img src="./images/95961473.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>中华V5</p>
							<p>河南嘉力4S店</p>
							<p>Tel:<span class="p-num">123727788-3417</span></p>
						</div>
					</li>
					<li>
						<a href="#2853" class="img_wrap"><img src="./images/95961788.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>K3</p>
							<p>河南新裕隆4S店</p>
							<p>Tel:<span class="p-num">123727788-3298</span></p>
						</div>
					</li>
					<li>
						<a href="#2684" class="img_wrap"><img src="./images/95908192.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>全新锐志</p>
							<p>丰田4S店</p>
							<p>Tel:<span class="p-num">123727788-3397 </span></p>
						</div>
					</li>
					<li>
						<a href="#2777" class="img_wrap"><img src="./images/95908315.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>B90</p>
							<p><a href="http://dijiuzhanzhang.com/">站长导航</a></p>
							<p>Tel:<span class="p-num">123727788-3305</span></p>
						</div>
					</li>
					<li>
						<a href="#2773" class="img_wrap"><img src="./images/95962049.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>思域</p>
							<p><a href="http://dijiuzhanzhang.com/">站长必备导航</a></p>
							<p>Tel:<span class="p-num">123727788-3309</span></p>
						</div>
					</li>
					<li>
						<a href="#2744" class="img_wrap"><img src="./images/95962283.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>索纳塔八</p>
							<p><a href="http://dijiuzhanzhang.com/">站长必备导航</a></p>
							<p>Tel:<span class="p-num">123727788-3336</span></p>
						</div>
					</li>
					<li>
						<a href="#2705" class="img_wrap"><img src="./images/95908659.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>陆丰X8</p>
							<p><a href="http://dijiuzhanzhang.com/">站长必备导航</a></p>
							<p>Tel:<span class="p-num">123727788-3375 </span></p>
						</div>
					</li>
					<li>
						<a href="#2673" class="img_wrap"><img src="./images/95961564.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>荣威550</p>
							<p><a href="http://dijiuzhanzhang.com/">站长必备导航</a></p>
							<p>Tel:<span class="p-num">123727788-3408</span></p>
						</div>
					</li>
					<li>
						<a href="#2753" class="img_wrap"><img src="./images/95908803.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>标致207</p>
							<p><a href="http://dijiuzhanzhang.com/">站长必备导航</a></p>
							<p>Tel:<span class="p-num">123727788-3326 </span></p>
						</div>
					</li>
					<li>
						<a href="#2725" class="img_wrap"><img src="./images/95908850.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>雪铁龙C4L</p>
							<p><a href="http://dijiuzhanzhang.com/">站长导航</a></p>
							<p>Tel:<span class="p-num">123727788-3355 </span></p>
						</div>
					</li>
					<li>
						<a href="#2696" class="img_wrap"><img src="./images/95908985.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>全球鹰GX7</p>
							<p><a href="http://dijiuzhanzhang.com/">站长导航</a></p>
							<p>Tel:<span class="p-num">123727788-3385 </span></p>
						</div>
					</li>
				</ul>
			</div>
			<a id="right1" class="prev icon btn"></a>
			<a id="left1" class="next icon btn"></a>
		</div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	$("#count1").dayuwscroll({
		parent_ele:'#wrapBox1',
		list_btn:'#tabT04',
		pre_btn:'#left1',
		next_btn:'#right1',
		path: 'left',
		auto:true,
		time:3000,
		num:5,
		gd_num:5,
		waite_time:1000
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 焦点图 幻灯片 轮播图 bar焦点图 带标题的焦点图 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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