jquery背景自动切换特效

浏览数：27 / 时间：2015年06月09日

查看效果网址：
http://keleyi.com/a/bjad/4kwkql05.htm

本特效的jquery版本只支持1.9.0以下。

代码如下：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5 <title>jquery背景自动切换特效-柯乐义</title>
  6 <link rel="stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/jqplug/9/main.css" />
  7 <link rel="stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/jqplug/9/bgstretcher.css" />
  8 <script src="http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js" type="text/javascript"></script>
  9 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqplug/9/bgstretcher.js"></script>
 10 <script type="text/javascript">
 11 $(document).ready(function(){
 12 
 13 // Initialize Backgound Stretcher    
 14 $(‘BODY‘).bgStretcher({
 15 images: [‘http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-1.jpg‘
 16 , ‘http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-2.jpg‘
 17 , ‘http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-3.jpg‘
 18 , ‘http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-4.jpg‘
 19 , ‘http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-5.jpg‘
 20 , ‘http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-6.jpg‘],
 21 imageWidth: 1024, 
 22 imageHeight: 768, 
 23 slideDirection: ‘N‘,
 24 slideShowSpeed: 1000,
 25 transitionEffect: ‘fade‘,
 26 sequenceMode: ‘normal‘,
 27 buttonPrev: ‘#prev‘,
 28 buttonNext: ‘#next‘,
 29 pagination: ‘#nav‘,
 30 anchoring: ‘left center‘,
 31 anchoringImg: ‘left center‘
 32 });
 33 
 34 });
 35 </script>
 36 
 37 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqplug/9/main.js"></script>
 38 
 39 </head>
 40 <body>
 41 <div id="page" style="display: none_;">
 42 <div class="page-top">&nbsp;</div>
 43 <div class="page-content"><div class="page-wrapper">
 44 <h1>背景图片自动切换·柯乐义·Background Stretcher jQuery Plugin Demo</h1>
 45 
 46 <form action="#"><div>
 47 <div class="column">
 48 <div class="row">
 49 <h2>Transition Effect</h2>
 50 <select id="effect">
 51 <option value="none">None</option>
 52 <option value="fade">Fade</option>
 53 <option value="simpleSlide">Simple Slider</option>
 54 <option value="superSlide">Super Slider</option>
 55 </select>
 56 </div>
 57 <div class="row slide-directions">
 58 <h2>Slide Direction</h2>
 59 <div class="column small">
 60 <div class="row"><input type="radio" id="dir-n" name="direction" class="direction" checked="checked"/><label for="dir-n">North</label></div>
 61 <div class="row"><input type="radio" id="dir-s" name="direction" class="direction"/><label for="dir-s">South</label></div>
 62 <div class="row"><input type="radio" id="dir-w" name="direction" class="direction"/><label for="dir-w">West</label></div>
 63 <div class="row"><input type="radio" id="dir-e" name="direction" class="direction"/><label for="dir-e">East</label></div>
 64 </div>
 65 <div class="column small super-directions">
 66 <div class="row"><input type="radio" id="dir-nw" name="direction" class="direction"/><label for="dir-nw">North-West</label></div>
 67 <div class="row"><input type="radio" id="dir-ne" name="direction" class="direction"/><label for="dir-ne">North-East</label></div>
 68 <div class="row"><input type="radio" id="dir-sw" name="direction" class="direction"/><label for="dir-sw">South-West</label></div>
 69 <div class="row"><input type="radio" id="dir-se" name="direction" class="direction"/><label for="dir-se">South-East</label></div>
 70 </div>
 71 </div>
 72 <div class="row">
 73 <h2>Sequence Mode</h2>
 74 <input type="radio" id="normal" name="mode" class="mode" checked="checked"/><label for="normal">Normal</label>
 75 <input type="radio" id="back" name="mode" class="mode"/><label for="back">Back</label>
 76 <span class="mode-randome"><input type="radio" id="random" name="mode" class="mode"/><label for="random">Random</label></span>
 77 </div>
 78 </div>
 79 <div class="column">
 80 <div class="row">
 81 <h2>Manual Controls</h2>
 82 <div class="nav-buttons">
 83 <a href="javascript:;" id="prev">Previouse image</a>&nbsp;&nbsp;&nbsp;
 84 <a href="javascript:;" id="next">Next image</a>
 85 </div>
 86 </div>
 87 <div class="row nav-buttons">
 88 <span class="pager">Pager:</span> <div id="nav">&nbsp;</div>
 89 </div>
 90 <div class="row">
 91 <a href="javascript:;" id="toggleAnimation" >Pause Animation</a>
 92 </div>
 93 </div>
 94 </div></form>
 95 </div></div>    
 96 <div class="page-bottom">&nbsp;</div>
 97 </div>
 98 <div style="text-align:center;clear:both">
 99 
100 <br>
101 <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <a herf="http://keleyi.com/a/bjad/4kwkql05.htm">原文</a></p>
102 </div>
103 
104 </body>
105 </html>