jquery slide插件淘寶焦點圖片輪播滾動,文字滾動,圖片滾動



145 576 193



特效描述:jquery slide 淘寶焦點圖 輪播滾動 文字滾動 圖片滾動,jquery焦點圖slide插件制作淘寶焦點圖片輪播切換滾動,左右按鈕控制產品圖片滾動切換,列表文字滾動。圖片/文字支持垂直滾動,水平滾動,淡出淡現等。

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jq.Slide.js"></script>

2. HTML代碼

	<div id="page">
		<table width="760" border="0" cellspacing="0" cellpadding="0" class="KS-table">
			<caption>JQ-Slide插件參數說明表</caption>
			<tr>
				<th width="155" scope="row">參數名</th>
				<td width="438">參數值(默認值可以省略)</td>
				<td width="166">&nbsp;</td>
			</tr>
			<tr>
				<th rowspan="5" scope="row">effect </th>
				<td>scroolY(默認):垂直滾動</td>
				<td rowspan="5">&nbsp;</td>
			</tr>
			<tr>
				<td>scroolX:水平滾動</td>
			</tr>
			<tr>
				<td>scroolTxt:文本垂直滾動</td>
			</tr>
			<tr>
				<td>fade:淡出</td>
			</tr>
			<tr>
				<td>scroolLoop:水平左右點擊滾動</td>
			</tr>
			<tr>
				<th scope="row">autoPlay</th>
				<td>true(默認): or false</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th scope="row">speed</th>
				<td>動畫速度時間,默認&quot;normal&quot;,可以使用毫秒或者JQ中的fast,slow,normal</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th scope="row">timer</th>
				<td>滾動間隔時間,默認&quot;1000,可以使用毫秒或者JQ中的fast,slow,normal</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th scope="row">claNav</th>
				<td>JQ-slide-nav(默認):觸點對象數組父級</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th scope="row">claCon</th>
				<td>JQ-slide-content(默認):滾動對象或滾動對象父級</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th scope="row">steps</th>
				<td>1(默認):滾動幾個</td>
				<td>&nbsp;</td>
			</tr>
		</table>
		<br />
		<hr />
		<br />
		<h3>滾動一:</h3>
		<div id="temp1">
			<div class="JQ-content-box">
				<ul class="JQ-slide-content">
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="289" src="images/ad1.jpg" width="549" /></a></li>
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="289" src="images/ad2.jpg" width="549"></a></li>
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="289" src="images/ad3.jpg" width="549"></a></li>
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="289" src="images/ad4.jpg" width="549"></a></li>
				</ul>
			</div>
			<ul class="JQ-slide-nav">
				<li class="on"><a href="#" class="next"><img src="images/guangg1.jpg"></a></li>
				<li><a href="#"><img src="images/guangg2.jpg"></a></li>
				<li><a href="#"><img src="images/guangg3.jpg"></a></li>
				<li><a href="#"><img src="images/guangg4.jpg"></a></li>
			</ul>
		</div><!--temp1 end-->
<pre>
$("#temp1").Slide({
	effect : "scroolY",
	speed : "normal",
	timer : 3000
});
</pre>
		<hr />
		<h3>滾動二:</h3>
		<div id="temp2">
			<div class="JQ-content-box">
				<ul class="JQ-slide-content">
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="289" src="images/ad1.jpg" width="549" /></a></li>
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="289" src="images/ad2.jpg" width="549"></a></li>
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="289" src="images/ad3.jpg" width="549"></a></li>
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="289" src="images/ad4.jpg" width="549"></a></li>
				</ul>
			</div>
			<ul class="JQ-slide-nav">
				<li class="on"><a href="#"><img src="images/guangg1.jpg"></a></li>
				<li><a href="#"><img src="images/guangg2.jpg"></a></li>
				<li><a href="#"><img src="images/guangg3.jpg"></a></li>
				<li><a href="#"><img src="images/guangg4.jpg"></a></li>
			</ul>
		</div><!--temp2 end-->
<pre>
$("#temp2").Slide({
	effect : "scroolX",
	speed : "normal",
	timer : 3000
});
</pre>
		<hr />
		<h3>滾動三:</h3>
		<div id="temp3">
			<div class="JQ-content-box">
				<ul class="JQ-slide-content">
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="289" src="images/ad1.jpg" width="549" /></a></li>
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="289" src="images/ad2.jpg" width="549"></a></li>
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="289" src="images/ad3.jpg" width="549"></a></li>
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="289" src="images/ad4.jpg" width="549"></a></li>
				</ul>
			</div>
			<ul class="JQ-slide-nav">
				<li class="on"><a href="#"><img src="images/guangg1.jpg"></a></li>
				<li><a href="#"><img src="images/guangg2.jpg"></a></li>
				<li><a href="#"><img src="images/guangg3.jpg"></a></li>
				<li><a href="#"><img src="images/guangg4.jpg"></a></li>
			</ul>
		</div><!--temp3 end-->
<pre>
$("#temp3").Slide({
	effect : "fade",
	speed : "normal",
	timer : 3000
});
</pre>
		<hr />
		<h3>滾動四:</h3>
		<div id="slide-box">
			<b class="corner"></b>
			<div class="slide-content" id="temp4">
				<div class="wrap">
					<ul class="JQ-slide-content">
						<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><IMG src="images/01.jpg" alt="懶人圖庫" width="330" height="450" /></a></li>
						<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><IMG alt="懶人圖庫" src="images/02.jpg" width="330" height="450" /></a></li>
						<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><IMG alt="懶人圖庫" src="images/03.jpg" width="330" height="450" /></a></li>
						<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><IMG alt="懶人圖庫" src="images/04.jpg" width="330" height="450" /></a></li>
						<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><IMG alt="懶人圖庫" src="images/05.jpg" width="330" height="450" /></a></li>
						<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><IMG alt="懶人圖庫" src="images/06.jpg" width="330" height="450" /></a></li>
					</ul>
				</div>
				<div class="JQ-slide-nav">
					<a class="prev" href="#">
						<b class="corner"></b>
						<span>&#8249;</span>
						<B class="corner"></B>
					</a>
					<a class="next" href="#">
						<b class="corner"></b>
						<span>&#8250;</span>
						<B class="corner"></B>
					</a>
				</div>
			</div>
			<b class="corner"></b>
		</div><!--slide-box end-->
<pre>
$("#temp4").Slide({
	effect : "scroolLoop",
	autoPlay:false,
	speed : "normal",
	timer : 3000,
	steps:2
});
</pre>
		<hr />
		<h3>滾動五:</h3>
		<div id="temp5">
			<div class="JQ-content-box">
				<ul class="JQ-slide-content">
					<li>這是公告標題的第一行</li>
					<li>這是公告標題的第二行</li>
					<li>這是公告標題的第三行</li>
					<li>這是公告標題的第四行</li>
					<li>這是公告標題的第五行</li>
					<li>這是公告標題的第六行</li>
					<li>這是公告標題的第七行</li>
					<li>這是公告標題的第八行</li>
					<li>這是公告標題的第9行</li>
					<li>這是公告標題的第10行</li>
					<li>這是公告標題的第11行</li>
					<li>這是公告標題的第12行</li>
				</ul>
			</div>
		</div><!--temp5 end-->
<pre>
$("#temp5").Slide({
	effect : "scroolTxt",
	speed : "normal",
	timer : 3000,
	steps:1
});
</pre>
		<hr />
		<h3>滾動六:</h3>
		<div id="temp6">
			<div class="JQ-content-box">
				<ul class="JQ-slide-content">
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="144" alt="" title="" src="images/g5.jpg" width="710" /></a> </li>
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="144" alt="" title="" src="images/20100820-284f62ce01db688e.jpg" width="710" /></a> </li>
					<li><a href="http://www.dijiuzhanzhang.com" target="_blank"><img height="144" alt="" title="" src="images/g1.jpg" width="710" /></a> </li>
				</ul>
				<ul class="JQ-slide-nav">
					<li class="on">1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</div>
		</div><!--temp6 end-->
<pre>
$("#temp6").Slide({
	effect : "scroolY",
	speed : "normal",
	timer : 3000
});
</pre>
	</div>



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滑動選項卡 滑動切換 滾動切換 滾動條切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 滾動切換 滾動條切換 帶縮略圖的幻燈片 圖片滾動 圖片滾動條 圖片切換 圖片選項卡 圖標選項卡 選項卡自動切換 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子