jquery 圖片切換 switchable 帶左右按鈕控制分頁索引圖片切換



122 484 162



特效描述:jquery 圖片切換 switchable 帶左右按鈕控制 分頁索引 圖片切換,用jquery制作圖片切換效果,圖片淡隱淡現帶左右按鈕和分頁索引圖片控制,鼠標點擊按鈕或圖片顯示大圖,大圖淡隱淡現切換播放,提高用戶體驗設計是jquery 圖片切換中非常常用的jquery 特效。

代碼結構

1. 引入JS

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

2. HTML代碼

<div id="featured">
	<div class="items" id="image_xixi-01">
		<a title="jquery HTML5 幻燈片插件 用 Canvas 制作類似百葉窗拍攝快門攝影拍攝效果" href="http://www.dijiuzhanzhang.com/"><img width="620" height="340" alt="jquery HTML5 幻燈片插件 用 Canvas 制作類似百葉窗拍攝快門攝影拍攝效果" src="images/8937f779ac932d157fe04fe463b083d4.jpg" /></a>
		<div class="word">
			<h3>jquery HTML5 幻燈片插件 用 Canvas 制作類似百葉窗拍攝快門攝影拍攝效果</h3>
			<p>用Canvas和HTML5制作類似百葉窗照相機拍攝快門拍攝效果、是一種非常逼真酷炫的jquery HTML5 圖片幻燈片</p>
		</div>
	</div>
	<div class="items" id="image_xixi-02">
		<a title="jquery 圖片放大鏡 圖片類似放大鏡效果鼠標滑過小圖異步加載中圖、大圖" href="http://www.dijiuzhanzhang.com/"><img width="620" height="340" alt="jquery 圖片放大鏡 圖片類似放大鏡效果鼠標滑過小圖異步加載中圖、大圖" src="images/598271bc3a3f325a0a1476b1ec18753d.jpg" /></a>
		<div class="word">
			<h3>jquery 圖片放大鏡 圖片類似放大鏡效果鼠標滑過小圖異步加載中圖、大圖</h3>
			<p>各大商城詳細頁面產品圖片特效展示,鼠標滑過小圖顯示中圖,鼠標滑過中圖顯示大圖展示,jquery放大鏡效果圖片類似圖片放大鏡展示</p>
		</div>
	</div>
	<div class="items" id="image_xixi-03">
		<a title="jquery cycle 循環幻燈片插件多功能幻燈片插件支持多種幻燈片特效" href="http://www.dijiuzhanzhang.com/"><img width="620" height="340" alt="jquery cycle 循環幻燈片插件多功能幻燈片插件支持多種幻燈片特效" src="images/1f3f7ebf6b65079c036f52349807a702.jpg" /></a>
		<div class="word">
			<h3>jquery cycle 循環幻燈片插件多功能幻燈片插件支持多種幻燈片特效</h3>
			<p>用jquery 幻燈片插件制作多種圖片與文本幻燈片特效,jquery cycle 循環 幻燈片插件支持幻燈片放大縮小、幻燈片上下滾動</p>
		</div>
	</div>
	<div class="items" id="image_xixi-04">
		<a title="jquery菜單特效 鼠標滑過菜單區域圖標和文本類似flash動畫酷炫移動展示" href="http://www.dijiuzhanzhang.com/"><img width="620" height="340" alt="jquery菜單特效 鼠標滑過菜單區域圖標和文本類似flash動畫酷炫移動展示" src="images/7ddbab9b843720f72356b9782146345a.jpg" /></a>
		<div class="word">
			<h3>jquery菜單特效 鼠標滑過菜單區域圖標和文本類似flash動畫酷炫移動展示</h3>
			<p>jquery iconmenu 插件制作用圖標和文本建立jquery菜單特效,當鼠標滑過菜單區域圖標與文本以酷炫的flash動畫移動展示</p>
		</div>
	</div>
	<div class="items" id="image_xixi-05">
		<a title="jquery 圖片特效用CSS3和HTML5制作仿動畫頭條報紙縮小到放大翻轉圖片展示" href="http://www.dijiuzhanzhang.com/"><img width="620" height="340" alt="jquery 圖片特效用CSS3和HTML5制作仿動畫頭條報紙縮小到放大翻轉圖片展示" src="images/323ce4b13f72648e096bd1a86cba762a.jpg"></a>
		<div class="word">
			<h3>jquery 圖片特效用CSS3和HTML5制作仿動畫頭條報紙縮小到放大翻轉圖片展示</h3>
			<p>今天做一個非常有趣的,并建立“紡紗報紙”帶有古典場景,CSS3、HTML5、jQuery、canvas元素制作報紙縮小到放大翻轉圖片展示</p>
		</div>
	</div>
	<div class="items" id="image_xixi-06">
		<a title="jquery 圖片切換插件制作banner圖片滾動播放、按鈕控制圖片滾動、選項卡等基于多功能jquery slide插件" href="http://www.dijiuzhanzhang.com/"><img width="620" height="340" alt="jquery 圖片切換插件制作banner圖片滾動播放、按鈕控制圖片滾動、選項卡等基于多功能jquery slide插件" src="images/2011-08-04/93f0fbcca20b400dfab9522431cc9de0.jpg" /></a>
		<div class="word">
			<h3>jquery 圖片切換插件制作banner圖片滾動播放、按鈕控制圖片滾動、選項卡等基于多功能jquery slide插件</h3>
			<p>jquery特效的slide 插件制作多功能按鈕控制圖片左右滾動、banner圖片滾動播放、多功能選擇卡等,且代碼少是一款非常不錯</p>
		</div>
	</div>
	<div class="items" id="image_xixi-07">
		<a title="javascript滾動圖片按鈕控制圖片左右自動滾動" href="http://www.dijiuzhanzhang.com/"><img width="620" height="340" alt=" javascript滾動圖片按鈕控制圖片左右自動滾動" src="images/6ae21c4c44285e9a58afd5c3f42ae36f.jpg" /></a>
		<div class="word">
			<h3>javascript滾動圖片按鈕控制圖片左右自動滾動</h3>
			<p>javascript特效用按鈕控制圖片內容左右自動滾動、這款特效是純javascript制作的,代碼簡約,是一款不可多的圖片滾動特效。</p>
		</div>
	</div>
</div><!--featured end-->
<div id="thumbs">
	<ul>
		<li class="first btnPrev"><img id="play_prev" src="images/btn_prev.gif" width="20" height="13" alt="上一個" /></li>
		<li class="slideshowItem">
			<a id="thumb_xixi-01" href="#image_xixi-01"><img width="68" height="40" alt="jquery HTML5 幻燈片插件 用 Canvas 制作類似百葉窗拍攝快門攝影拍攝效果" src="images/8937f779ac932d157fe04fe463b083d4.jpg" /></a>
		</li>
		<li class="slideshowItem">
			<a id="thumb_xixi-02" href="#image_xixi-02"><img width="68" height="40" alt="jquery 圖片放大鏡 圖片類似放大鏡效果鼠標滑過小圖異步加載中圖、大圖" src="images/598271bc3a3f325a0a1476b1ec18753d.jpg" /></a>
		</li>
		<li class="slideshowItem">
			<a id="thumb_xixi-03" href="#image_xixi-03"><img width="68" height="40" alt="jquery cycle 循環幻燈片插件多功能幻燈片插件支持多種幻燈片特效" src="images/1f3f7ebf6b65079c036f52349807a702.jpg" /></a>
		</li>
		<li class="slideshowItem">
			<a id="thumb_xixi-04" href="#image_xixi-04"><img width="68" height="40" alt="jquery菜單特效 鼠標滑過菜單區域圖標和文本類似flash動畫酷炫移動展示" src="images/7ddbab9b843720f72356b9782146345a.jpg" /></a>
		</li>
		<li class="slideshowItem">
			<a id="thumb_xixi-05" href="#image_xixi-05"><img width="68" height="40" alt="jquery 圖片特效用CSS3和HTML5制作仿動畫頭條報紙縮小到放大翻轉圖片展示" src="images/323ce4b13f72648e096bd1a86cba762a.jpg"></a>
		</li>
		<li class="slideshowItem">
			<a id="thumb_xixi-06" href="#image_xixi-06"><img width="68" height="40" alt="jquery 圖片切換插件制作banner圖片滾動播放、按鈕控制圖片滾動、選項卡等基于多功能jquery slide插件" src="images/93f0fbcca20b400dfab9522431cc9de0.jpg" /></a>
		</li>
		<li class="slideshowItem">
			<a id="thumb_xixi-07" href="#image_xixi-07"><img width="68" height="40" alt=" javascript滾動圖片按鈕控制圖片左右自動滾動" src="images/6ae21c4c44285e9a58afd5c3f42ae36f.jpg" /></a>
		</li>
		<li class="last btnNext"><img id="play_next" src="images/btn_next.gif" width="20" height="13" alt="下一個" /></li>
	</ul>
</div><!--thumbs end-->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子