jquery modernizr制作html5全屏图片滚动幻灯片切换代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

220 879 294



特效描述:jquery modernizr html5全屏图片 滚动幻灯片切换。全屏图片滑动幻灯片切换

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Exo+2:400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Exo+2:600' rel='stylesheet' type='text/css'>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/full_screen_background_slider.css" rel="stylesheet" />

2. 引入JS

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/fsbs.min.js"></script>

3. HTML代码

<ul class="fsb-slider">
	<li><span><img src="images/1.jpg"></span></li>
	<li><span><img src="images/2.jpg"></span></li>
	<li><span><img src="images/4.jpg"></span></li>
	<li><span><img src="images/3.jpg"></span></li>
</ul>
<div id="content">
	<h3>选择动画风格</h3>
	<a href="Javascript:void(0);" class="animation_selector" data-value="crossfade">Crossfade</a><a href="Javascript:void(0);" class="animation_selector" data-value="slidefade">SlideFade</a><a href="Javascript:void(0);" class="animation_selector" data-value="rotatefade">RotateFade</a><a href="Javascript:void(0);" class="animation_selector" data-value="randomslide">RandomSlide</a>
	<br><a href="Javascript:void(0);" class="animation_selector" data-value="slidelefttoleft">Slide Left to Left</a>
	<a href="Javascript:void(0);" class="animation_selector" data-value="slidelefttoright">Slide Left to Right</a>
	<a href="Javascript:void(0);" class="animation_selector" data-value="slidelefttotop">Slide Left to Top</a>
	<a href="Javascript:void(0);" class="animation_selector" data-value="slidelefttobottom">Slide Left to Bottom</a>
	<br><a href="Javascript:void(0);" class="animation_selector" data-value="sliderighttoright">Slide Right to Right</a>
	<a href="Javascript:void(0);" class="animation_selector" data-value="sliderighttoleft">Slide Right to Left</a>
	<a href="Javascript:void(0);" class="animation_selector" data-value="sliderighttotop">Slide Right to Top</a>
	<a href="Javascript:void(0);" class="animation_selector" data-value="sliderighttobottom">Slide Right to Bottom</a>
	<br><a href="Javascript:void(0);" class="animation_selector" data-value="slidetoptotop">Slide Top to Top</a>
	<a href="Javascript:void(0);" class="animation_selector" data-value="slidetoptobottom">Slide Top to Bottom</a>
	<a href="Javascript:void(0);" class="animation_selector" data-value="slidetoptoleft">Slide Top to Left</a>
	<a href="Javascript:void(0);" class="animation_selector" data-value="slidetoptoright">Slide Top to Right</a>
	<br><a href="Javascript:void(0);" class="animation_selector" data-value="slidebottomtobottom">Slide Bottom to Bottom</a>
	<a href="Javascript:void(0);" class="animation_selector" data-value="slidebottomtotop">Slide Bottom to Top</a>
	<a href="Javascript:void(0);" class="animation_selector" data-value="slidebottomtoleft">Slide Bottom to Left</a>
	<a href="Javascript:void(0);" class="animation_selector" data-value="slidebottomtoright">Slide Bottom to Right</a>
	<h3>选择模式的风格</h3>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="disable">Disable</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern">Pattern1</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern1">Pattern2</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern2">Pattern3</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern3">Pattern4</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern4">Pattern5</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern5">Pattern6</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern6">Pattern7</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern7">Pattern8</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern8">Pattern9</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern9">Pattern10</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern10">Pattern11</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern11">Pattern12</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern12">Pattern13</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern13">Pattern14</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern14">Pattern15</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern15">Pattern16</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern16">Pattern17</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern17">Pattern18</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern18">Pattern19</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern19">Pattern20</a>
	<a href="Javascript:void(0);" class="pattern_selector" data-value="pattern20">Pattern21</a>
	</pre>
</div>



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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