jquery滑动选项卡带按钮控制选项卡滚动切换



129 514 172



特效描述:滑动选项卡 带按钮控制 选项卡滚动切换,jquery滑动选项卡切换,制作一个带左右按钮控制选项卡标签和选项卡内容滚动切换的,选项卡特效。当点击按钮切换到最后时,选项卡滚动到最前一个。适用于网站主题内容展示的选项卡滚动切换。

代码结构

1. 引入JS

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

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";}
/* sliderTab */
.sliderTab{position:relative;width:840px;height:330px;overflow:hidden;margin:30px auto;padding:0 40px;}
.slidesPrev,.slidesNext{width:40px;height:330px;overflow:hidden;position:absolute;top:0;background:url(images/slidebtn.png) no-repeat;}
.slidesPrev{left:0;background-position:0 0;}
.slidesNext{right:0;background-position:-40px 0;}
.sliderTag{position:relative;width:840px;height:70px;overflow:hidden;background:url(images/inner-shadow-home.jpg) no-repeat 0 100%;}
.sliderTag .sliderButtons,.slidesWrap .slides-container{position:absolute;left:0;top:0;}
.sliderButtons ul li{float:left;text-align:center;width:168px;overflow:hidden;font-size:14px;font-weight:800;}
.sliderButtons ul li span{cursor:pointer;display:block;padding:12px 0 5px 0;height:48px;line-height:24px;color:#a4a4a4;background:#FBFBFB;border-top:1px solid #E6E6E6;border-right:1px solid #E6E6E6;}
.sliderButtons ul li span.selected{background:url(images/slide-menu-active.png) no-repeat;padding:12px 0 10px 0;}
.slidesWrap{position:relative;height:259px;width:840px;overflow:hidden;border-bottom:solid 1px #E6E6E6;}
.sliderItem{margin:20px 0 0 0;float:left;height:240px;width:840px;overflow:hidden;}
.sliderItem .photo{background:url(images/frame_large.gif) no-repeat;float:left;margin:25px 0 6px 20px;display:inline;padding:9px 0 0 9px;height:184px;width:177px;}
.sliderItem .dis{font-size:160%;width:490px;height:160px;overflow:hidden;float:left;margin:30px 0 0px 40px;display:inline;color:#25b8ff;line-height:25px;padding:0 40px 0 40px;background:url(images/quote-open.png) no-repeat;}
.sliderItem .dis .closed-quotes{width:26px;height:22px;float:right;background:url(images/quote-closed.png) no-repeat;margin:0 -30px 0 0;*margin:-30px -30px 0 0;}
.sliderItem .review{float:right;margin:10px 40px 0 0;display:inline;color:#A4A4A4;font-size:110%;}
</style>
<div class="sliderTab">
	<div class="sliderTag">
		<div class="sliderButtons">
			<ul>
				<li><span>js图片特效</span></li>
				<li><span>js导航菜单</span></li>
				<li><span>js选项卡特效</span></li>
				<li><span>js文字特效</span></li>
				<li><span>js表单特效</span></li>
				<li><span>js表格特效</span></li>
				<li><span>flash图片特效</span></li>
			</ul>
		</div>
	</div>
	<div class="prev-hider"></div>
	<div class="next-hider"></div>
	<a href="javascript:void(0);" class="slidesPrev" title="Go previous"></a>
	<a href="javascript:void(0);" class="slidesNext" title="Go next"></a>
	<div class="slidesWrap">
		<div class="slides-container">
			<div class="sliderItem">
				<div class="photo"><a href="http://www.17sucai.com/" target="_blank"><img width="170" height="170" alt="js图片特效制作js焦点图上下滚动slider切换效果" src="images/small20dd0b83c2db55f830e4453a601a3cd4.jpg" /></a></div>
				<div class="dis">
					js图片切换特效制作js焦点图slider上下滚动切换带序列按钮控制图片滚动。内含js代码下载。
					<div class="closed-quotes"></div>
				</div>
				<div class="review">发布人:admin | 2012-11-14</div>
			</div><!--sliderItem end-->
			<div class="sliderItem">
				<div class="photo"><a href="http://www.17sucai.com/" target="_blank"><img width="170" height="170" alt="js树形导航菜单制作垂直js导航条特效" src="images/small480f846f099a5892a0f1aee6170540ce.jpg" /></a></div>
				<div class="dis">
					js树形导航菜单制作一个垂直纵向js导航条只设置导航二级菜单分类,点击显示隐藏二级菜单目录。内含js代码下载。
					<div class="closed-quotes"></div>
				</div>
				<div class="review">发布人:admin | 2012-11-14</div>
			</div><!--sliderItem end-->
			<div class="sliderItem">
				<div class="photo"><a href="http://www.17sucai.com/" target="_blank"><img width="170" height="170" alt="js选项卡类似js导航菜单的js tab选项卡切换效果" src="images/small32dff1529ed7b1792569d9c196cdf70f.jpg" /></a></div>
				<div class="dis">
					js选项卡制作一个类似js导航菜单的js选项卡切换特效,内含js代码下载。
					<div class="closed-quotes"></div>
				</div>
				<div class="review">发布人:admin | 2012-11-14</div>
			</div><!--sliderItem end-->
			<div class="sliderItem">
				<div class="photo"><a href="http://www.17sucai.com/" target="_blank"><img width="170" height="170" alt="js文字滚动插件制作双行关联向上文字间隙滚动" src="images/small8c9e75ce24ea85b5b972749a289283c9.jpg" /></a></div>
				<div class="dis">
					js文字滚动插件制作一个js文字滚动效果,两排双行关联向上文字间隙滚动,支持多组文字滚动列表。内含js代码下载。
					<div class="closed-quotes"></div>
				</div>
				<div class="review">发布人:admin | 2012-11-14</div>
			</div><!--sliderItem end-->
			<div class="sliderItem">
				<div class="photo"><a href="http://www.17sucai.com/" target="_blank"><img width="170" height="170" alt="js checkbox全选 反选 取消全部设置表单checkbox复选框勾选" src="images/small58f10da1bc3a78a5cb2e221f068c7678.jpg" /></a></div>
				<div class="dis">
					js特效制作js checkbox复选框全选 反选 取消全部等设置多个表单里面的checkbox复选框勾选特效。内含js代码下载。
					<div class="closed-quotes"></div>
				</div>
				<div class="review">发布人:admin | 2012-11-14</div>
			</div><!--sliderItem end-->
			<div class="sliderItem">
				<div class="photo"><a href="http://www.17sucai.com/" target="_blank"><img width="170" height="170" alt="js表格特效制作js表格排序表格内容可筛选排序" src="images/smallc3b50f0a2c971e094fd503d02e323400.jpg" /></a></div>
				<div class="dis">
					js表格特效制作一个js表格排序筛选,点击表格标题,子内容按大小、字母先后顺序排列。内含js代码下载。
					<div class="closed-quotes"></div>
				</div>
				<div class="review">发布人:admin | 2012-11-14</div>
			</div><!--sliderItem end-->
			<div class="sliderItem">
				<div class="photo"><a href="http://www.17sucai.com/" target="_blank"><img width="170" height="170" alt="flash图片切换左右滚动带序列索引按钮控制flash动画图片特效" src="images/small03c0020fa66f5a07b4ce0511dbe19331.jpg" /></a></div>
				<div class="dis">
					flash动画图片滚动特效带序列按钮对应索引图片切换左右滚动支持xml文件外调、图片外调等功能。
					<div class="closed-quotes"></div>
				</div>
				<div class="review">发布人:admin | 2012-11-14</div>
			</div><!--sliderItem end-->
		</div>
	</div>
</div>



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡自动切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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