jquery tools.scrollable滑塊滾動插件制作左右按鈕控制滑動門切換代碼



112 447 150



特效描述:滑塊滾動插件 左右按鈕控制 滑動門切換,

代碼結構

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

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

老夫子电子