jquery.switchable插件導航菜單特效



84 335 112



特效描述:jquery switchable插件 導航菜單特效,jquery.switchable插件導航菜單特效

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<div class="demo">
	<h2 class="title">1、選項卡應用</h2>
	<h3 class="subhead">使用AJAX載入內容</h3>
	<div class="tabs-trigger" id="ajaxtab">
		<a href="tab/ajax/ajax-content.html">jquery特效</a>
		<a href="tab/ajax/ajax-content-1.html">js特效</a>
		<a href="tab/ajax/ajax-content-2.html">flash特效</a>
	</div>
	<div class="tabs-panel" id="ajaxcon">
		<!-- 此處內容AJAX加載 -->
	</div>
	<script type="text/javascript">
	$(function(){
		$("#ajaxtab").switchable("#ajaxcon", { effect: "ajax" });
	});
	</script>
	<h3 class="subhead">垂直手風琴</h3>
	<div class="accordion" id="accordion">
		<h3>jquery特效</h3>
		<div class="panel">
			<p><a href="http://www.cqetom.live/" target="_blank">jquery 圖片切換特效 鼠標點擊左右按鈕焦點圖</a></p>
			<p><a href="http://www.cqetom.live/" target="_blank">jquery 圖片特效 鼠標滑過圖片顯示文字</a></p>
		</div>
		<h3>js特效</h3>
		<div class="panel">
			<p><a href="http://www.cqetom.live/" target="_blank">jquery 圖片切換 switchable 左右按鈕切換</a></p>
			<p><a href="http://www.cqetom.live/" target="_blank">jquery 圖片放大鏡 圖片放大鏡效果鼠標</a></p>
			<p><a href="http://www.cqetom.live/" target="_blank">jquery 圖片幻燈片 點擊小圖顯示大圖異步加載</a></p>
		</div>
		<h3>flash特效</h3>
		<div class="panel">
			<p><a href="http://www.cqetom.live/" target="_blank">jquery cycle 循環幻燈片幻燈片插件幻燈片</a></p>
		</div>
	</div>
	<script type="text/javascript">
	$.switchable.addEffect("accordion", function(i, done) {
		var self = this,
			cfg = self.getCfg(),
			items = self.getPanels(),
			thisItem = self.getVisiblePanel(i);
		items.slideUp(cfg.speed * 1000);
		thisItem.slideDown(cfg.speed * 1000, done);
	});
	$(function(){
		$("#accordion").switchable("#accordion > .panel", {
			triggers: "h3",
			triggerType: "click",
			effect: "accordion",
			speed: .3
		});
	});
	</script>
	<h3 class="subhead">水平手風琴</h3>
	<div class="h-accordion" id="h-accordion">
		<img src="images/streaminge.png" />
		<div>
			<b>jquery特效</b>
			<i>Content #1</i>
		</div>
		<img src="images/flash.png" />
		<div>
			<b>js特效</b>
			<i>Content #2</i>
		</div>
		<img src="images/streaming.png" />
		<div>
			<b>flash特效</b>
			<i>Content #3</i>
		</div>
	</div>
	<script type="text/javascript">
	var w;
	$.switchable.addEffect("h-accordion", function(i, done) {
		var self = this,
			items = self.getPanels(),
			lastItem = items.eq(self.getIndex()),
			thisItem = self.getVisiblePanel(i);
		if ( !w ) {
			w = items.first().width();
		}
		if ( lastItem.is(":animated") ) {
			lastItem.stop(true);
		}
		lastItem.animate({ width: 0 }, function() {
			$(this).hide();
		});
		thisItem.animate({ width: w }, function() { 
			$(this).show();
			done.call();
		});
	});
	$(function(){
		$("#h-accordion").switchable("#h-accordion > div", {
			triggers: "img",
			triggerType: "click",
			effect: "h-accordion",
			speed: .3
		}).children("div:gt(0)").css("width", "0px");
	});
	</script>
	<h3 class="subhead">多個標簽選項卡切換<font color="#ff0000">一段代碼搞定</font></h3>
	<div class="tabs-trigger trigger">
		<a href="#First">jquery特效</a>
		<a href="#Second">js特效</a>
		<a href="#Third">flash特效</a>
	</div>
	<div class="tabs-panel pane">
		<p>Tab Panel 1 <a href="#Third">Open third tab</a></p>
	</div>
	<div class="tabs-panel pane">
		<p>Tab Panel 2</p>
	</div>
	<div class="tabs-panel pane">
		<p>Tab Panel 3 <a href="#Second">Open second tab</a></p>
	</div>
	<br />
	<div>
		<div class="tabs-trigger trigger">
			<a href="#First">jquery特效</a>
			<a href="#Second">js特效</a>
			<a href="#Third">flash特效</a>
		</div>
		<div class="tabs-panel pane">
			<p>Tab Panel 1</p>
			<div class="tabs-trigger trigger w1">
				<a href="#First">jquery特效</a>
				<a href="#Second">js特效</a>
				<a href="#Third">flash特效</a>
			</div>
			<div class="tabs-panel pane w2">
				<p>Tab Panel 1-1</p>
			</div>
			<div class="tabs-panel pane w2">
				<p>Tab Panel 1-2</p>
			</div>
			<div class="tabs-panel pane w2">
				<p>Tab Panel 1-3</p>
			</div>
			<!-- subTabs end -->
		</div>
		<div class="tabs-panel pane">
			<p>Tab Panel 2</p>
			<div class="tabs-trigger trigger w1">
				<a href="#First">jquery特效</a>
				<a href="#Second">js特效</a>
				<a href="#Third">flash特效</a>
			</div>
			<div class="tabs-panel pane w2">
				<p>Tab Panel 2-1</p>
			</div>
			<div class="tabs-panel pane w2">
				<p>Tab Panel 2-2</p>
			</div>
			<div class="tabs-panel pane w2">
				<p>Tab Panel 2-3</p>
			</div>
			<!-- subTabs end -->
		</div>
		<div class="tabs-panel pane">
			<p>Tab Panel 3</p>
			<div class="tabs-trigger trigger w1">
				<a href="#First">jquery特效</a>
				<a href="#Second">js特效</a>
				<a href="#Third">flash特效</a>
			</div>
			<div class="tabs-panel pane w2">
				<p>Tab Panel 3-1</p>
			</div>
			<div class="tabs-panel pane w2">
				<p>Tab Panel 3-2</p>
			</div>
			<div class="tabs-panel pane w2">
				<p>Tab Panel 3-3</p>
			</div>
			<!-- subTabs end -->
		</div>
		<!-- Tabs end -->
	</div>
	<script type="text/javascript">
	$(function(){
		$(".trigger").switchable("> .pane");
	});
	</script>
	<h3 class="subhead">使用回調函數</h3>
	<div class="tabs-trigger" id="trigger01">
		<a href="#First">jquery特效</a>
		<a href="#Second">js特效</a>
		<a href="#Third">flash特效</a>
	</div>
	<div class="tabs-panel" id="panel01">
		<p><input type="checkbox" id="checkbox" /><label style="cursor:pointer;" for="checkbox">我接受這些條款和條件</label></p>
		<p>Tab Panel 2</p>
		<p>Tab Panel 3</p>
	</div>
	<script type="text/javascript">
	$(function(){
		$("#trigger01").switchable("#panel01 > p", function(event, index) {
			var obj = $("#checkbox");
			if ( index > 0 && !obj.is(":checked") ) {
				obj.parent().addClass("error");
				return false;
			}
			obj.parent().removeClass("error");
		});
	});
	</script>
	<h3 class="subhead">自動切換</h3>
	<div id="tabs1" class="tabs-trigger">
		<a href="#First">jquery特效</a>
		<a href="#Second">js特效</a>
		<a href="#Third">flash特效</a>
	</div>
	<div id="panels1" class="tabs-panel">
		<p>Tab Panel 1</p>
		<p>Tab Panel 2</p>
		<p>Tab Panel 3</p>
	</div>
	<script type="text/javascript">
	$(function(){
		window.api = $("#tabs1").switchable("#panels1 > p", {
			circular: true  //是否循環播放
		}).autoplay();
	});	
	</script>
<style type="text/css">
.slide-trigger{position:relative;top:-25px;width:615px;text-align:right;padding-right:5px;}
.slide-trigger a{display:inline-block;margin-right:3px;width:16px;height:16px;line-height:16px;text-align:center;color:#d94b01;background-color:#fff5e1;border:1px solid #f47500;outline:none;overflow:hidden;}
.slide-trigger a:hover{ text-decoration:none;}
.slide-trigger a.current{width:18px;height:18px;line-height:18px;font-weight:bold;color:#FFF;background:url(images/t-bg.png) repeat-x;}
.slide-panel{/* 下面四項必須設置 */position:relative;width:620px;height:340px;overflow:hidden;border:1px solid #B6D1E6;}
.slide-panel div{ position:absolute;}
.slide-panel div img,.slide-panel div a{display:block; /* fix img's 3px bug in ie6*/width:620px;height:340px;}
/* Horizontal Special */
#slide1 div{ width:2010em; /* 設置足夠的寬度 */}
#slide1 div img,#slide1 div a{ float:left;}
</style>
	<h2 class="title">2、滑動</h2>
	<h3 class="subhead">水平/垂直滾動</h3>
	<div id="slide1" class="slide-panel">
		<div>
			<a href="http://www.cqetom.live/"><img alt="jquery soChange 切換插件 支持焦點圖片切換 選項卡切換 帶按鈕與分頁索引按鈕切換" src="images/7ec25ef488c710d8d8ac3e5a33d6034b.jpg" width="620" height="340" /></a>
			<a href="http://www.cqetom.live/"><img alt="jquery 圖片切換 switchable 帶左右按鈕控制分頁索引圖片切換" src="images/2c73b60f596df9f398871518dcc496f3.jpg" width="620" height="340" /></a>
			<a href="http://www.cqetom.live/"><img alt="jquery Xslider 插件焦點圖片特效圖片淡隱淡現、圖片上下滾動、圖片左右滾動、選項卡" src="images/f16b49d4849ce225d66900ed23367f74.jpg" width="620" height="340" /></a>
			<a href="http://www.cqetom.live/"><img alt="jquery 圖片切換 自動切換顯示隱藏show/hide帶左右按鈕與分頁索引按鈕控制圖片自動切換顯示隱藏show/hide" src="images/96739e2a70242a54419dafa9922084f1.jpg" width="620" height="340" /></a>
			<a href="http://www.cqetom.live/"><img alt="jquery 圖片切換插件制作banner圖片滾動播放、按鈕控制圖片滾動、選項卡等基于多功能jquery slide插件" src="images/93f0fbcca20b400dfab9522431cc9de0.jpg" width="620" height="340" /></a>
		</div>
	</div>
	<div id="trigger1" class="slide-trigger"><!-- 自動創建 triggers --></div>
	<script type="text/javascript">
	$(function(){
		/* Horizontal */
		$("#trigger1").switchable("#slide1 > div > a", { effect: "scroll" }).carousel().autoplay();
	});
	</script>
	<br />
	<div id="slide2" class="slide-panel">
		<div>
			<a href="http://www.cqetom.live/"><img alt="jquery soChange 切換插件 支持焦點圖片切換 選項卡切換 帶按鈕與分頁索引按鈕切換" src="images/7ec25ef488c710d8d8ac3e5a33d6034b.jpg" width="620" height="340" /></a>
			<a href="http://www.cqetom.live/"><img alt="jquery 圖片切換 switchable 帶左右按鈕控制分頁索引圖片切換" src="images/2c73b60f596df9f398871518dcc496f3.jpg" width="620" height="340" /></a>
			<a href="http://www.cqetom.live/"><img alt="jquery Xslider 插件焦點圖片特效圖片淡隱淡現、圖片上下滾動、圖片左右滾動、選項卡" src="images/f16b49d4849ce225d66900ed23367f74.jpg" width="620" height="340" /></a>
			<a href="http://www.cqetom.live/"><img alt="jquery 圖片切換 自動切換顯示隱藏show/hide帶左右按鈕與分頁索引按鈕控制圖片自動切換顯示隱藏show/hide" src="images/96739e2a70242a54419dafa9922084f1.jpg" width="620" height="340" /></a>
			<a href="http://www.cqetom.live/"><img alt="jquery 圖片切換插件制作banner圖片滾動播放、按鈕控制圖片滾動、選項卡等基于多功能jquery slide插件" src="images/93f0fbcca20b400dfab9522431cc9de0.jpg" width="620" height="340" /></a>
		</div>
	</div>
	<div id="trigger2" class="slide-trigger"><!-- 自動創建 triggers --></div>
	<script type="text/javascript">
	$(function(){
		/* Vertical */
		$("#trigger2").switchable("#slide2 > div > a", { effect: "scroll", vertical: true }).carousel().autoplay();
	});
	</script>
<style type="text/css">
.slidebox{width:622px;height:342px;position:relative;overflow:hidden;}
.slidebox .prev3, .slidebox .next3{width:45px;height:99px;position:absolute;top:101px;z-index:3;filter:alpha(opacity=20);-moz-opacity:.2;opacity:.2;-webkit-transition:All .5s ease;-moz-transition:All .5s ease;-o-transition:All .5s ease;}
.slidebox .prev3{background:url(images/arrow.gif);background-position:0 0;left:0;}
.slidebox .next3{background:url(images/arrow.gif);background-position:-45px 0;right:0;}
.slidebox .prev3:hover, .slidebox .next3:hover{filter:alpha(opacity=60);-moz-opacity:.6;opacity:.6;}
</style>	
	<h3 class="subhead">帶按鈕控制滾動</h3>
	<div class="slidebox">
		<div id="slide3" class="slide-panel">
			<div>
				<a href="http://www.cqetom.live/"><img alt="jquery soChange 切換插件 支持焦點圖片切換 選項卡切換 帶按鈕與分頁索引按鈕切換" src="images/7ec25ef488c710d8d8ac3e5a33d6034b.jpg" width="620" height="340" /></a>
			<a href="http://www.cqetom.live/"><img alt="jquery 圖片切換 switchable 帶左右按鈕控制分頁索引圖片切換" src="images/2c73b60f596df9f398871518dcc496f3.jpg" width="620" height="340" /></a>
			<a href="http://www.cqetom.live/"><img alt="jquery Xslider 插件焦點圖片特效圖片淡隱淡現、圖片上下滾動、圖片左右滾動、選項卡" src="images/f16b49d4849ce225d66900ed23367f74.jpg" width="620" height="340" /></a>
			<a href="http://www.cqetom.live/"><img alt="jquery 圖片切換 自動切換顯示隱藏show/hide帶左右按鈕與分頁索引按鈕控制圖片自動切換顯示隱藏show/hide" src="images/96739e2a70242a54419dafa9922084f1.jpg" width="620" height="340" /></a>
			<a href="http://www.cqetom.live/"><img alt="jquery 圖片切換插件制作banner圖片滾動播放、按鈕控制圖片滾動、選項卡等基于多功能jquery slide插件" src="images/93f0fbcca20b400dfab9522431cc9de0.jpg" width="620" height="340" /></a>
			</div>
		</div>
		<div id="trigger3" class="slide-trigger"><!-- 自動創建 triggers --></div>
		<a class="prev3" title="上一張" href="javascript:void(0);"></a><a class="next3" title="下一張" href="javascript:void(0);"></a>
	</div>
	<script type="text/javascript">
	$(function(){
		$("#trigger3").switchable("#slide3 > div > a", { effect: "scroll", vertical: true }).carousel().autoplay({api:true});
		var api1 = $("#trigger3").switchable();
		$(".prev3").click(function(){
			api1.prev();
			return false;
		});
		$(".next3").click(function(){
			api1.next();
			return false;
		});		
	});
	</script>
	<h3 class="subhead">點擊圖片觸發滑動下一張</h3>
	<div id="panel4" class="slide-panel">
		<div>
			<img alt="jquery soChange 切換插件 支持焦點圖片切換 選項卡切換 帶按鈕與分頁索引按鈕切換" src="images/7ec25ef488c710d8d8ac3e5a33d6034b.jpg" width="620" height="340" />
			<img alt="jquery 圖片切換 switchable 帶左右按鈕控制分頁索引圖片切換" src="images/2c73b60f596df9f398871518dcc496f3.jpg" width="620" height="340" />
			<img alt="jquery Xslider 插件焦點圖片特效圖片淡隱淡現、圖片上下滾動、圖片左右滾動、選項卡" src="images/f16b49d4849ce225d66900ed23367f74.jpg" width="620" height="340" />
			<img alt="jquery 圖片切換 自動切換顯示隱藏show/hide帶左右按鈕與分頁索引按鈕控制圖片自動切換顯示隱藏show/hide" src="images/96739e2a70242a54419dafa9922084f1.jpg" width="620" height="340" />
			<img alt="jquery 圖片切換插件制作banner圖片滾動播放、按鈕控制圖片滾動、選項卡等基于多功能jquery slide插件" src="images/93f0fbcca20b400dfab9522431cc9de0.jpg" width="620" height="340" />
		</div>
	</div>
	<div id="trigger4" class="slide-trigger" style="display:none;"> <!-- 標簽必須存在,通過CSS隱藏  --> </div>
	<script type="text/javascript">
	$(function(){
		$("#trigger4").switchable("#panel4 > div > img", {
			effect: "scroll",
			vertical: true,
			panelSwitch: true,
			circular: true
		});
	});	
	</script>
	<h2 class="title">3、滾動效果</h2>
	<h3 class="subhead">圖片帶索引序號按鈕和左右按鈕圖片滾動</h3>
	<div class="trigger-bar">
		<a href="javascript:void(0);" title="下翻" id="next2" class="next"></a>
		<a href="javascript:void(0);" title="上翻" id="prev2" class="prev"></a>
		<div id="trigger5" class="scrollable-trigger"></div>
	</div>
	<div id="panel5" class="scrollable-panel">
		<div class="clearfix">
			<!-- 1~3 -->
			<img src="images/T1uRBrXe0XXXXXXXXX-120-60.gif" />
			<img src="images/T1bQVrXaVpXXXXXXXX-120-60.gif" />
			<img src="images/T1l7FrXgNvXXXXXXXX-120-60.gif" />
			<!-- 4~6 -->
			<img src="images/T1ikRrXglqXXXXXXXX-120-60.gif" />
			<img src="images/T1XYRsXipXXXXXXXXX-120-60.gif" />
			<img src="images/T1MQ8rXe8kXXXXXXXX-120-60.gif" />
			<!-- 7~9 -->
			<img src="images/T1mOJsXXdEXXXXXXXX-120-60.gif" />
			<img src="images/T1bkNrXb8sXXXXXXXX-120-60.gif" />
			<img src="images/T1Ck8rXiXkXXXXXXXX-120-60.gif" />
		</div>
	</div>
	<script type="text/javascript">
	$(function(){	
		$("#trigger5").switchable("#panel5 > div > img", {
			triggerType: "click", //點擊觸發
			effect: "scroll", //設置圖片切換效果為“滾動”
			steps: 3,   //一次移動圖片的個數
			visible: 3  //一屏顯示圖片的個數
		}).carousel().autoplay(); //循環旋轉木馬和自動滾動效果
		var api2 = $("#trigger5").switchable();
		$("#next2").click(function(){
			api2.next();
		});
		$("#prev2").click(function(){
			api2.prev();
		});
	});
	</script>
	<h3 class="subhead">鼠標滾輪插件</h3>
	<div class="trigger-bar">
		<a href="javascript:void(0);" title="下翻" id="next6" class="next"></a>
		<a href="javascript:void(0);" title="上翻" id="prev6" class="prev"></a>
		<div id="trigger6" class="scrollable-trigger"></div>
	</div>
	<div id="panel6" class="scrollable-panel">
		<div class="clearfix">
			<!-- 1~3 -->
			<img src="images/T1uRBrXe0XXXXXXXXX-120-60.gif" />
			<img src="images/T1bQVrXaVpXXXXXXXX-120-60.gif" />
			<img src="images/T1l7FrXgNvXXXXXXXX-120-60.gif" />
			<!-- 4~6 -->
			<img src="images/T1ikRrXglqXXXXXXXX-120-60.gif" />
			<img src="images/T1XYRsXipXXXXXXXXX-120-60.gif" />
			<img src="images/T1MQ8rXe8kXXXXXXXX-120-60.gif" />
			<!-- 7~9 -->
			<img src="images/T1mOJsXXdEXXXXXXXX-120-60.gif" />
			<img src="images/T1bkNrXb8sXXXXXXXX-120-60.gif" />
			<img src="images/T1Ck8rXiXkXXXXXXXX-120-60.gif" />
		</div>
	</div>
	<script type="text/javascript">
	$(function(){
		$("#trigger6").switchable("#panel6 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3,
			circular: true //循環滾動
		}).mousewheel();
		var api3 = $("#trigger6").switchable();
		$("#next6").click(function(){
			api3.next();
		});
		$("#prev6").click(function(){
			api3.prev();
		});
	});
	</script>
	<h3 class="subhead">自定義部件圖片滾動擴展</h3>
	<div class="widget"></div>
	<div class="trigger-bar">
		<a href="javascript:void(0);" title="下翻" class="next" id="next7"></a>
		<a href="javascript:void(0);" title="上翻" class="prev" id="prev7"></a>
		<div class="scrollable-trigger" id="trigger7"></div>
	</div>
	<div id="panel7" class="scrollable-panel">
		<div class="clearfix">
			<!-- 1~3 -->
			<img src="images/T1uRBrXe0XXXXXXXXX-120-60.gif" />
			<img src="images/T1bQVrXaVpXXXXXXXX-120-60.gif" />
			<img src="images/T1l7FrXgNvXXXXXXXX-120-60.gif" />
			<!-- 4~6 -->
			<img src="images/T1ikRrXglqXXXXXXXX-120-60.gif" />
			<img src="images/T1XYRsXipXXXXXXXXX-120-60.gif" />
			<img src="images/T1MQ8rXe8kXXXXXXXX-120-60.gif" />
			<!-- 7~9 -->
			<img src="images/T1mOJsXXdEXXXXXXXX-120-60.gif" />
			<img src="images/T1bkNrXb8sXXXXXXXX-120-60.gif" />
			<img src="images/T1Ck8rXiXkXXXXXXXX-120-60.gif" />
		</div>
	</div>
	<script type="text/javascript">
	$(function(){
		window.api = $("#trigger7").switchable("#panel7 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3,
			api: true
		});
		$("#next7").click(function(){
			api.next();
		});
		$("#prev7").click(function(){
			api.prev();
		});
		/* Custom widget */
		$(".scrollable-panel > div > img").click(function() {
			$(".widget").empty();
			$("<img>", { src: $(this).attr("src") }).appendTo(".widget");
		}).css("cursor", "pointer").first().trigger("click");
	});
	</script>
<style type="text/css">
.scrollbox{width:472px;height:152px;overflow:hidden;}
.scrollable-pic{position:relative;margin:0 auto 0;width:324px;height:152px;overflow:hidden;}
.scrollable-pic ul{position:absolute;width:2010em;}
.scrollable-pic ul li{float:left;text-align:center;width:162px;height:152px;}
.scrollable-pic ul li img{display:block;width:150px;height:150px;border:1px solid #cfdae4;}
.scrollbox .prev, .scrollbox .next{position:relative;top:-90px;float:left;display:block;width:22px;height:34px;background-image:url(images/ctrl.png);background-repeat:no-repeat;outline:none;}
.scrollbox .prev{left:4px;background-position:0 -34px;}
.scrollbox .next{left:424px;background-position:-22px -34px;}
.scrollbox .prev:hover{text-decoration:none;background-position:0 0;}
.scrollbox .next:hover{text-decoration:none;background-position:-22px 0;}
</style>
	<h3 class="subhead">圖片左右滾動</h3>
	<div class="scrollbox">
		<div id="scrollable-2-panel" class="scrollable-pic">
			<ul>
				<!-- 1 to 2 -->
				<li><a href="http://www.cqetom.live/" target="_blank"><img height="150" width="150" alt="jquery 幻燈片效果制作防蘋果風格的開機畫面" src="images/small4ffecc68cb780d1801f19db52d38cabd.jpg" /></a></li>
				<li><a href="http://www.cqetom.live/" target="_blank"><img height="150" width="150" alt="jquery 幻燈片切換使用jQuery和CSS制作一個馬賽克幻燈片圖片切換效果" original="http://www.jsfoot.com/d/file/jquery/items/2011-03-04/small56327cd4d61c9556fa4c6f02a9ad001b.jpg" class="txpic" src="images/small56327cd4d61c9556fa4c6f02a9ad001b.jpg" /></a></li>
				<!-- 3 to 4 -->
				<li><a href="http://www.cqetom.live/" target="_blank"><img height="150" width="150" alt="jquery 圖片幻燈片仿IBM首頁焦點圖切換,類似flash動態效果圖片切換" src="images/smalle748fbed210baf3dfa8849af0f89dfd7.jpg" /></a></li>
				<li><a href="http://www.cqetom.live/" target="_blank"><img height="150" width="150" alt="jquery特效基于jquery幻燈片插件制作一個泡沫幻燈片圖片展示特效" src="images/smallbb5b0cf754cc5be75e6944c439dc9aee.jpg" /></a></li>
				<!-- 5 to 6 -->
				<li><a href="http://www.cqetom.live/" target="_blank"><img height="150" width="150" alt="jquery cycle 循環幻燈片插件多功能幻燈片插件支持多種幻燈片特效" src="images/small1f3f7ebf6b65079c036f52349807a702.jpg" /></a></li>
				<li><a href="http://www.cqetom.live/" target="_blank"><img height="150" width="150" alt="jquery 幻燈片插件 canvas 3D旋轉木馬 圖片立體展示 圖片有大到小一次順序排列" src="images/small18129a189a8f547aba10fb10f91e6282.jpg" /></a></li>
			</ul>
		</div>
		<div class="scrollable-btn" id="scrollable-2-trigger" style="display:none;"></div>
		<a href="#" class="prev" id="prev8"></a>
		<a href="#" class="next" id="next8"></a>
	</div>
	<script type="text/javascript">
	$(function(){
		$("#scrollable-2-trigger").switchable("#scrollable-2-panel > ul > li", {
			effect: "scroll",
			steps: 2,
			visible: 2
		}).carousel();
		var api3 = $("#scrollable-2-trigger").switchable();
		$("#prev8").click(function(){
			api3.prev();
			return false;
		});
		$("#next8").click(function(){
			api3.next();
			return false;
		});
	});
	</script>
<style type="text/css">
#scrollable-3-panel ul{position:absolute;width:auto;}
#scrollable-3-panel li{float:none;width:324px;}
</style>
	<h3 class="subhead">圖片上下滾動</h3>
	<div class="scrollbox">
		<div id="scrollable-3-panel" class="scrollable-pic">
			<ul>
				<li>
					<a style="float:left;" href="http://www.cqetom.live/" target="_blank"><img height="150" width="150" alt="jquery 幻燈片效果制作防蘋果風格的開機畫面" src="images/small4ffecc68cb780d1801f19db52d38cabd.jpg" /></a>
					<a style="float:right;" href="http://www.cqetom.live/" target="_blank"><img height="150" width="150" alt="jquery 幻燈片切換使用jQuery和CSS制作一個馬賽克幻燈片圖片切換效果" class="txpic" src="images/small56327cd4d61c9556fa4c6f02a9ad001b.jpg" /></a>
				</li>
				<li>
					<a style="float:left;" href="http://www.cqetom.live/" target="_blank"><img height="150" width="150" alt="jquery 圖片幻燈片仿IBM首頁焦點圖切換,類似flash動態效果圖片切換" src="images/smalle748fbed210baf3dfa8849af0f89dfd7.jpg" /></a>
					<a style="float:right;" href="http://www.cqetom.live/" target="_blank"><img height="150" width="150" alt="jquery特效基于jquery幻燈片插件制作一個泡沫幻燈片圖片展示特效" src="images/smallbb5b0cf754cc5be75e6944c439dc9aee.jpg" /></a>
				</li>
				<li>
					<a style="float:left;" href="http://www.cqetom.live/" target="_blank"><img height="150" width="150" alt="jquery cycle 循環幻燈片插件多功能幻燈片插件支持多種幻燈片特效" src="images/small1f3f7ebf6b65079c036f52349807a702.jpg" /></a>
					<a style="float:right;" href="http://www.cqetom.live/" target="_blank"><img height="150" width="150" alt="jquery 幻燈片插件 canvas 3D旋轉木馬 圖片立體展示 圖片有大到小一次順序排列" src="images/small18129a189a8f547aba10fb10f91e6282.jpg" /></a>
				</li>
			</ul>
		</div>
		<div class="scrollable-btn" id="scrollable-3-trigger" style="display:none;"></div>
		<a href="#" class="prev" id="prev9"></a>
		<a href="#" class="next" id="next9"></a>
	</div>
	<script type="text/javascript">
	$(function(){
		$("#scrollable-3-trigger").switchable("#scrollable-3-panel > ul > li", {
			effect: "scroll",
			steps: 1,
			visible: 1,
			vertical: true
		}).carousel();
		var api3 = $("#scrollable-3-trigger").switchable();
		$("#prev9").click(function(){
			api3.prev();
			return false;
		});
		$("#next9").click(function(){
			api3.next();
			return false;
		});
	});
	</script>	
	<div style="height:16px;padding:40px 0;color:#999;">jquery.switchable插件各參數使用方法見:http://www.blueidea.com/articleimg/2010/03/7434/switchable/</div>
</div>



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


熱門標簽: 收縮菜單 收縮導航 右鍵菜單 圖片放大鏡 圖片疊加 圖片層疊 導航切換 菜單切換 圖片翻轉 圖片旋轉 浮動菜單 浮動導航 圖片拖動 圖片拖拽 圖片延遲加載 圖片延遲 圖片加載 圖片淡出淡進 圖片淡出 圖片淡進 圖片全屏 二維碼 頭像上傳 圖片上傳 滾動導航菜單 滾動菜單 滾動導航 flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 滑動導航菜單 滑動導航 滑動菜單 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 帶縮略圖的幻燈片 地圖 中國地圖 世界地圖 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 滑動選項卡 滑動切換 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 圖片廣告 滾動切換 滾動條切換 純圖片輪播 圖片輪播 圖片滾動 圖片滾動條 圖片收縮展開 圖片收縮 圖片展開 圖片滑動 圖片滑塊 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片切換 圖片選項卡 圖標選項卡 自動滾動圖片輪播 圖標導航 圖標菜單 滑動手風琴 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 背景切換 大圖切換 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 圖表 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 圖片 圖片插件 頭像截圖 圖片滑動 圖片滑塊 滑動手風琴 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 選項卡自動切換 導航菜單插件 導航插件 菜單插件 圖片滑動 滑動圖片
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子