jQuery实现数字按钮焦点图切换



36 142 48



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

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