jquery tab带缩略图片选项卡左右按钮控制焦点图片滚动切换



112 444 149



特效描述: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

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