jquery tools.scrollable滑块滚动插件制作左右按钮控制滑动门切换代码



109 433 145



特效描述:滑块滚动插件 左右按钮控制 滑动门切换,

代码结构

1. 引入JS

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

2. HTML代码

<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.dijiuzhanzhang.com/" target="_blank"><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.dijiuzhanzhang.com/" target="_blank"><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.dijiuzhanzhang.com/" target="_blank"><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.dijiuzhanzhang.com/" target="_blank"><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">Who We Are</a>
					<a id="t3">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">
$("#scroll").scrollable({
	items: '#boards',
	circular: true,
	speed: 500
}).navigator().data("scrollable");
</script>



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 自动滚动图片轮播 滚动切换 滚动条切换 滑动选项卡 滑动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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