jquery滑動選項卡帶按鈕控制選項卡滾動切換



134 532 178



特效描述:滑動選項卡 帶按鈕控制 選項卡滾動切換,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

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

老夫子电子