jquery tab帶縮略圖片選項卡左右按鈕控制焦點圖片滾動切換



117 464 155



特效描述:jquery tab帶縮略圖選項卡 左右按鈕控制 焦點圖片滾動切換,

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<div class="idx-focus" id="j_idx_focus">
	<div class="idx-foc-tmp">
		<ul class="focus-pic" rel="xtaberItems">
			<li class="xtaber-item">
				<a href="http://www.dijiuzhanzhang.com/" class="white">
					<img src="images/20131107112540527b08344b08c.jpg" alt="傳奇經典熱血戰紀">
					<span class="txt">傳奇經典熱血戰紀</span>
					<i class="bg"></i>
				</a>
			</li>
			<li class="xtaber-item">
				<a href="http://www.dijiuzhanzhang.com/" class="white">
					<img src="images/20131108165940527ca7fc97ed8.jpg" alt="百度輸入法">
					<span class="txt">百度輸入法</span>
					<i class="bg"></i>
				</a>
			</li>
			<li class="xtaber-item">
				<a href="http://www.dijiuzhanzhang.com/" class="white">
					<img src="images/2013111114355452807acaf1c6d.jpg" alt="愛帆瀏覽器">
					<span class="txt">愛帆瀏覽器</span>
					<i class="bg"></i>
				</a>
			</li>
			<li class="xtaber-item">
				<a href="http://www.dijiuzhanzhang.com/" class="white">
					<img src="images/20131113182710528353fe29fb5.png" alt="PPS影音">
					<span class="txt">PPS影音</span>
					<i class="bg"></i>
				</a>
			</li>
			<li class="xtaber-item">
				<a href="http://www.dijiuzhanzhang.com/" class="white" title="百度殺毒">
					<img src="images/2013111111234552804dc1e23aa.jpg" alt="百度殺毒">
					<span class="txt">百度殺毒</span>
					<i class="bg"></i>
				</a>
			</li>
			<li class="xtaber-item">
				<a href="http://www.dijiuzhanzhang.com/" class="white">
					<img src="images/20131028111313526dd6497f10a.jpg" alt="快播">
					<span class="txt">快播</span>
					<i class="bg"></i>
				</a>
			</li>
		</ul>
	</div>
	<ul rel="xtaberTabs" class="xtaber-tabs">
		<li rel="xtaberTabItem" class="current"><img src="images/s_90_54_20131107112540527b08344b08c.jpg" alt="傳奇經典熱血戰紀"><i></i></li>
		<li rel="xtaberTabItem"><img src="images/s_90_54_20131108165940527ca7fc97ed8.jpg" alt="百度輸入法"><i></i></li>
		<li rel="xtaberTabItem"><img src="images/s_90_54_2013111114355452807acaf1c6d.jpg" alt="愛帆瀏覽器"><i></i></li>
		<li rel="xtaberTabItem"><img src="images/s_90_54_20131113182710528353fe29fb5.png" alt="PPS影音"><i></i></li>
		<li rel="xtaberTabItem"><img src="images/s_90_54_2013111111234552804dc1e23aa.jpg" alt="百度殺毒"><i></i></li>
		<li rel="xtaberTabItem"><img src="images/s_90_54_20131028111313526dd6497f10a.jpg" alt="快播"><i></i></li>
	</ul>
	<a href="javascript:;" class="btn-prev"></a>
	<a href="javascript:;" class="btn-next"></a>
</div>
<script type="text/javascript">
$(function(){
    /* 首頁焦點圖 */
    if(isNeeded('#j_idx_focus')){
        var obj = $('#j_idx_focus');
        $.fn.xTaber({
            content: obj,
            tab: obj,
            auto: true,
            style: 'left',
            prev: obj.find('.btn-prev'),
            next: obj.find('.btn-next')
        });
    }
});
</script>



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 帶標題的焦點圖 滾動切換 滾動條切換 帶縮略圖的幻燈片 純圖片輪播 圖片輪播 自動滾動圖片輪播 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子