<!DOCTYPE html>
<!--[if lt IE 10]> <html lang="en" class="no-js lt-ie10"> <![endif]-->
<!--[if lt IE 9]> <html lang="en" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="gb2312">
<title>jQuery全屏背景滑块幻灯片 - 网页模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/component.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/full_screen_background_slider.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery('.fsb-slider').fsbslider({"animation_time":15,"animation_type":"crossfade","pattern":false});
});
</script>
<script type="text/javascript" src="js/fsbs.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<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>Choose the animation style</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>Choose the pattern style</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>
<div style="text-align:center;clear:both">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>