jQuery實現數字按鈕焦點圖切換



33 131 44



特效描述:jQuery實現 數字按鈕 焦點圖切換,jQuery實現數字按鈕焦點圖切換

代碼結構

1. 引入CSS

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="css/strapslide.css" rel="stylesheet" media="screen">

2. HTML代碼

<div class="container-fluid nopadding">
	<div class="row-fluid">
		<!-- 1ST SLIDER START -->
		<div class="span12 strapslide" id="strapslide">
			<!-- SLIDER CONTAINER START -->
			<ul class="slider-container unstyled">
				<!-- SLIDE START -->
				<li class="slide active" data-transition="scaleup" id="dontbuy">
				<div class="container-fluid slide-content nopadding">
					<div class="row-fluid">
						<div class="widthpadding offset3 span6 text-center" data-top="45" id="dontbuytext1">
							<h1 class="background-black">IT&#39;S A BIRD! </h1>
						</div>
					</div>
					<div class="row-fluid">
						<div class="widthpadding offset3 span6 text-center" data-top="45" id="dontbuytext2">
							<h1 class="background-black">IT&#39;S A PLANE! </h1>
						</div>
					</div>
					<div class="row-fluid">
						<div class="widthpadding offset3 span6 text-center" data-top="45" id="dontbuytext3">
							<h1 class="background-black">NO. IT&#39;S STRAPSLIDE!
							</h1>
						</div>
					</div>
					<div class="row-fluid">
						<div class="widthpadding offset3 span6 text-center" data-top="38" id="dontbuytext4">
							<h1 style="text-shadow: 1px 1px 0px #000000; filter: dropshadow(color=#000000, offx=1, offy=1);">
							DON&#39;T BUY STRAPSLIDE </h1>
							<h3 class="background-black" style="font-weight:normal;">
							IF YOU EXPECT ANYTHING LESS THAN AWESOME </h3>
							<a href="http://51qianduan.com" class="btn btn-large btn-primary">
							BUY NOW </a></div>
					</div>
				</div>
				<img class="slide-background" src="img/placeholder1.jpg"> </li>
				<!-- SLIDE END -->
				<!-- SLIDE START --></li>
				<li class="slide" data-transition="scaledownrotateccw" id="famous">
				<div class="container-fluid slide-content nopadding">
					<div class="row-fluid">
						<div class="widthpadding span5 text-center" id="famoustext" data-top="15" data-right="5">
							<div class="strapslide-video visible-desktop">
								<iframe src="http://51qianduan.com" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
								</iframe></div>
							<h1 class="background-black">IT&#39;S SHOWTIME </h1>
							<h3 style="font-weight:normal">STRAPSLIDE IS TOTALLY 
							CINEMATIC </h3>
						</div>
					</div>
				</div>
				<img class="slide-background" src="img/placeholder4.jpg"> </li>
				<!-- SLIDE END -->
				<!-- SLIDE START --></li>
				<li class="slide" data-transition="fromtop" id="touchresponsive">
				<div class="container-fluid slide-content nopadding">
					<div class="row-fluid" id="plane">
						<div class="span12 nopadding">
							<img src="img/plane.png"> </div>
					</div>
					<div class="row-fluid">
						<div id="touchtext" data-left="10" style="position:absolute;" class="span12 widthpadding">
							<h1>TOUCH ENABLED <br />
							<span id="touchtext_and">AND</span>
							<span class="accentblue" id="touchtext_responsive">RESPONSIVE</span>
							</h1>
						</div>
					</div>
					<div class="row-fluid" id="applecontainer">
						<div class="span5 hidden-phone" id="apple">
							<img id="macbook" src="img/applemacbook.png">
							<img id="ipad" src="img/appleipad.png">
							<img id="iphone" src="img/appleiphone.png"> </div>
					</div>
				</div>
				<img class="slide-background" src="img/placeholder2.jpg"> </li>
				<!-- SLIDE END -->
				<!-- SLIDE START --></li>
				<li class="slide" data-transition="scaledownrotatecw" id="omg">
				<div class="container-fluid slide-content nopadding">
					<div class="row-fluid">
						<div class="widthpadding span5 text-center" id="omgtext" data-top="20" data-left="10">
							<h1 class="background-red">WHOA! </h1>
							<h1 style="color:black; font-weight:normal;">YOU FOUND 
							STRAPSLIDE! </h1>
							<ul id="omgtextlist" class="text-left" style="text-indent:45px; list-style-image:url('img/liststyle.png');color:black;">
								<li><b>UNLIMITED</b> Customizability</li>
								<li>Based on Bootstrap</li>
								<li>Touch Enabled</li>
								<li>Responsive</li>
								<li>Keyboard Navigation </li>
							</ul>
						</div>
					</div>
				</div>
				<img class="slide-background" src="img/placeholder6.jpg"> </li>
				<!-- SLIDE END -->
				<!-- SLIDE START --></li>
				<li class="slide" data-transition="fromleft" id="seenufo">
				<div class="row-fluid" id="ufo">
					<div class="span12 nopadding">
						<img src="img/ufo.png"> </div>
				</div>
				<div class="row-fluid">
					<div id="ufotext">
						<h1 style="color:#0074cd;">YOU LOOK LIKE</h1>
						<h1 class="background-darkblue" style="font-weight:normal;">
						YOU&#39;VE SEEN AN UFO </h1>
						<p style="color:#5d5d5d;">Fortunately, strapslide has that 
						effect on people </p>
					</div>
				</div>
				<img class="slide-background" src="img/placeholder3.jpg"> </li>
				<!-- SLIDE END -->
				<!-- SLIDE START --></li>
				<li class="slide" data-transition="fromright">
				<div class="row-fluid nopadding">
					<div class="span12">
						<iframe class="strapslide-videofullscreen" src="http://51qianduan.com" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
						</iframe></div>
				</div>
				</li>
				<!-- SLIDE END --></li>
			</ul>
			<!-- SLIDER CONTAINER END -->
			<!-- PROGRESS START -->
			<div class="progress progress-striped">
				<div class="bar" style="width: 0%">
				</div>
			</div>
			<!-- PROGRESS END -->
			<!-- PAGINATION START -->
			<div class="row">
				<div class="span12">
					<div class="pagination">
						<ul class="strapslide-pagination autocenter">
						</ul>
					</div>
				</div>
			</div>
			<!-- PAGINATION END -->
			<!-- CONTROLS START -->
			<div class="row-fluid">
				<div class="span2 offset5 text-center">
					<div class="strapslide-controls btn-group">
						<a class="prev btn btn-primary btn-large" href="javascript:void(0);">
						&lt; </a>
						<a class="next btn btn-primary btn-large" href="javascript:void(0);">
						&gt; </a></div>
				</div>
			</div>
			<!-- CONTROLS END --></div>
		<!-- 1ST SLIDER END --></div>
</div>
</div>
</div>
</div>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js">
</script>
<script src="js/respond.min.js">
</script>
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js">
</script>
<script src="js/jquery.touchSwipe.min.js">
</script>
<script src="js/jquery.transit.min.js">
</script>
<script src="js/jquery.mousewheel.js">
</script>
<!-- Slider plugin -->
<script src="js/strapslide.js">
</script>
<!-- Script -->
<script src="js/script.js">
</script>
<div style="text-align:center;clear:both">
</div>



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


熱門標簽: flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 滑動選項卡 滑動切換 滾動切換 滾動條切換 滑動手風琴 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 其他 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 全屏焦點圖 選項卡自動切換 按鈕控制 進度條 進度條插件
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表