jquery.switchable选项卡图片滚动手风琴导航菜单插件



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

28 111 38



特效描述:选项卡 图片滚动 手风琴 导航菜单。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.51qianduan.com/" target="_blank">jquery 图片切换特效 鼠标点击左右按钮焦点图</a></p>
			<p><a href="http://www.51qianduan.com/" target="_blank">jquery 图片特效 鼠标滑过图片显示文字</a></p>
		</div>
		<h3>js特效</h3>
		<div class="panel">
			<p><a href="http://www.51qianduan.com/" target="_blank">jquery 图片切换 switchable 左右按钮切换</a></p>
			<p><a href="http://www.51qianduan.com/" target="_blank">jquery 图片放大镜 图片放大镜效果鼠标</a></p>
			<p><a href="http://www.51qianduan.com/" target="_blank">jquery 图片幻灯片 点击小图显示大图异步加载</a></p>
		</div>
		<h3>flash特效</h3>
		<div class="panel">
			<p><a href="http://www.51qianduan.com/" 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.51qianduan.com/"><img alt="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换" src="images/7ec25ef488c710d8d8ac3e5a33d6034b.jpg" width="620" height="340" /></a>
			<a href="http://www.51qianduan.com/"><img alt="jquery 图片切换 switchable 带左右按钮控制分页索引图片切换" src="images/2c73b60f596df9f398871518dcc496f3.jpg" width="620" height="340" /></a>
			<a href="http://www.51qianduan.com/"><img alt="jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡" src="images/f16b49d4849ce225d66900ed23367f74.jpg" width="620" height="340" /></a>
			<a href="http://www.51qianduan.com/"><img alt="jquery 图片切换 自动切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片自动切换显示隐藏show/hide" src="images/96739e2a70242a54419dafa9922084f1.jpg" width="620" height="340" /></a>
			<a href="http://www.51qianduan.com/"><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.51qianduan.com/"><img alt="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换" src="images/7ec25ef488c710d8d8ac3e5a33d6034b.jpg" width="620" height="340" /></a>
			<a href="http://www.51qianduan.com/"><img alt="jquery 图片切换 switchable 带左右按钮控制分页索引图片切换" src="images/2c73b60f596df9f398871518dcc496f3.jpg" width="620" height="340" /></a>
			<a href="http://www.51qianduan.com/"><img alt="jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡" src="images/f16b49d4849ce225d66900ed23367f74.jpg" width="620" height="340" /></a>
			<a href="http://www.51qianduan.com/"><img alt="jquery 图片切换 自动切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片自动切换显示隐藏show/hide" src="images/96739e2a70242a54419dafa9922084f1.jpg" width="620" height="340" /></a>
			<a href="http://www.51qianduan.com/"><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.51qianduan.com/"><img alt="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换" src="images/7ec25ef488c710d8d8ac3e5a33d6034b.jpg" width="620" height="340" /></a>
			<a href="http://www.51qianduan.com/"><img alt="jquery 图片切换 switchable 带左右按钮控制分页索引图片切换" src="images/2c73b60f596df9f398871518dcc496f3.jpg" width="620" height="340" /></a>
			<a href="http://www.51qianduan.com/"><img alt="jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡" src="images/f16b49d4849ce225d66900ed23367f74.jpg" width="620" height="340" /></a>
			<a href="http://www.51qianduan.com/"><img alt="jquery 图片切换 自动切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片自动切换显示隐藏show/hide" src="images/96739e2a70242a54419dafa9922084f1.jpg" width="620" height="340" /></a>
			<a href="http://www.51qianduan.com/"><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.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 幻灯片效果制作防苹果风格的开机画面" src="images/small4ffecc68cb780d1801f19db52d38cabd.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 幻灯片切换使用jQuery和CSS制作一个马赛克幻灯片图片切换效果" original="http://www.51qianduan.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.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片幻灯片仿IBM首页焦点图切换,类似flash动态效果图片切换" src="images/smalle748fbed210baf3dfa8849af0f89dfd7.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery特效基于jquery幻灯片插件制作一个泡沫幻灯片图片展示特效" src="images/smallbb5b0cf754cc5be75e6944c439dc9aee.jpg" /></a></li>
				<!-- 5 to 6 -->
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery cycle 循环幻灯片插件多功能幻灯片插件支持多种幻灯片特效" src="images/small1f3f7ebf6b65079c036f52349807a702.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" 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.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 幻灯片效果制作防苹果风格的开机画面" src="images/small4ffecc68cb780d1801f19db52d38cabd.jpg" /></a>
					<a style="float:right;" href="http://www.51qianduan.com/" 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.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片幻灯片仿IBM首页焦点图切换,类似flash动态效果图片切换" src="images/smalle748fbed210baf3dfa8849af0f89dfd7.jpg" /></a>
					<a style="float:right;" href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery特效基于jquery幻灯片插件制作一个泡沫幻灯片图片展示特效" src="images/smallbb5b0cf754cc5be75e6944c439dc9aee.jpg" /></a>
				</li>
				<li>
					<a style="float:left;" href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery cycle 循环幻灯片插件多功能幻灯片插件支持多种幻灯片特效" src="images/small1f3f7ebf6b65079c036f52349807a702.jpg" /></a>
					<a style="float:right;" href="http://www.51qianduan.com/" 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.51qianduan.com/articleimg/2010/03/7434/switchable/</div>
</div>



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


热门标签: 滚动导航菜单 导航切换 滚动切换 图片滚动 图片切换 文字滚动 文字切换 背景切换 图片文字滚动 手风琴 全屏滚动 选项卡自动切换 页面滚动 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动流动 滚动切换 滑动选项卡切换 自动滚动图片轮播 选项卡切换 滑动手风琴

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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