基于jQuery实现左右按钮tab选项卡切换



65 256 86



特效描述:基于jQuery实现 左右按钮 tab 选项卡切换,基于jQuery实现左右按钮tab选项卡切换

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.tools.min.js"></script>

2. HTML代码

<br>
	<div id="scrollWrapper">
		<div id="arrows">
			<a id="arrow-left" class="prev"></a>
			<a id="arrow-right" class="next"></a>
		</div>
		<div id="scrollBorder">
			<div id="scroll">
				<div id="boards">
					<!-- b1 -->
					<div class="board" id="b1">
						<h2 class="ir">Achieve New Highs with HyperX Internet Marketing</h2>
						<p>We provide a full spectrum of online advertising, design and development services. We specialize in designing custom solutions that fit the bill for small and large companies alike. We're fast, professional and reliable.
						<br><a class="GlobalButton" href="http://www.51qianduan.com//" target="_parent"><span>Tour Our Services</span></a></p>
					</div>
					<!-- b2 -->
					<div class="board" id="b2">
						<h2 class="ir">A Powerful Engine Behind Your Next Campaign</h2>
						<p>We are a team of new media gurus who help establish trends and best practices in the world of Internet marketing. Some say we like Internet marketing a bit much, but that's part of what makes our strategists, designers and developers so good.
						<br><a class="GlobalButton" href="http://www.51qianduan.com//" target="_parent"><span>Look Under the Hood</span></a></p>
					</div>
					<!-- b3 -->
					<div class="board"  id="b3">
						<h2 class="ir">Exceptional Service, Better Results</h2>
						<p>We are committed to exceptional service - both for clients and campaigns. That's why we go above and beyond to ensure that clients are happy at every stage of the process. Furthermore, we focus on maximizing a client's return on investment.
						<br><a class="GlobalButton" href="http://www.51qianduan.com//" target="_parent"><span>See Our Fan Club</span></a></p>
					</div>
					<!-- b4 -->
					<div class="board" id="b4">
						<h2 class="ir">We Build Great Campaigns One Pixel At A Time</h2>
						<p>The reason we survived the dot com bust - and are thriving today - is because we are willing to put in hard work, take on new challenges and do what it takes to make every client's campaign a success.
						<br><a class="GlobalButton" href="http://www.51qianduan.com//" target="_parent"><span>Let's Get to Work</span></a></p>
					</div>
			  </div> <!-- end boards -->
			  <!-- required for IE6/IE7 -->
			  <br clear="all" />
			  <!-- thumbnails -->
				<div id="thumbs" class="t">
					<div class="navi">
						<a id="t1" class="active">What We Do</a>
						<a id="t2" class="">Who We Are</a>
						<a id="t3" class="">Why Choose Us</a>
						<a id="t4" class="noborder">How We Work</a>
					</div>
				</div>
			</div> <!-- end scroll -->
		</div> <!-- end scrollBorder -->
	</div> <!-- end scrollWrapper -->
	<script type="text/javascript">
	  // initialize scrollable and return the programming API
	  $("#scroll").scrollable({
	  	items: '#boards',
	  	circular: true,
	  	speed: 500
	  // use the navigator plugin
	  }).navigator().data("scrollable");
	</script>
<div style="text-align:center;clear:both">
</div>



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


热门标签: 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 切换按钮 form表单 焦点图幻灯片 带标题的焦点图 图片切换 图片轮播 切换按钮 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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