jquery scroll帶導航標簽的選項卡圖片滾動代碼



101 401 134



特效描述:導航標簽選項卡 圖片滾動代碼,

代碼結構

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

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

老夫子电子