生活随笔
收集整理的這篇文章主要介紹了
jquery背景自动切换特效
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
查看效果網(wǎng)址：
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"> </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>
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"> </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"> </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> web前端：http://www.cnblogs.com/jihua/p/webfront.html
總結(jié)
以上是生活随笔為你收集整理的jquery背景自动切换特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
