极速小乌龟

导航

jQuery-图片轮播-随意切换图片 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>图片切换插件Nivo Slider</title>
 5     <link href="Css-8-8/nivo-slider.css" 
 6           rel="stylesheet" type="text/css" />
 7     <link href="Css-8-8/theme-default.css" 
 8           rel="stylesheet" type="text/css" />   
 9     <script type="text/javascript" 
10             src="Jscript/jquery-1.8.2.min.js">
11     </script>
12     <script type="text/javascript"
13             src="Js-8-8/jquery.nivo.slider.js">
14     </script>
15     <script type="text/javascript">
16         $(function() {
17             $('#slider').nivoSlider({
18                 effect: 'boxRandom', //图片随机切换效果
19                 beforeChange: function() { }, //可编写图片切换之前回调函数
20                 afterLoad: function() { }, //可编写图片加载之后回调函数
21                 controlNavThumbs: true, //使用缩略图控制导航
22                 manualAdvance: true //需要手动切换
23             });
24         });
25     </script>
26 </head>
27 <body>
28     <div class="theme-default">
29         <div id="slider" class="nivoSlider">
30             <a href="javascript:">
31                <img src="Pic-8-8/img01.jpg" alt="01" 
32                     data-thumb="Pic-8-8/img01.jpg" title="第1幅图片"/>
33                </a>
34             <a href="javascript:">
35                <img src="Pic-8-8/img02.jpg" alt="02" 
36                     data-thumb="Pic-8-8/img02.jpg" title="第2幅图片"/>
37             </a>
38             <a href="javascript:">
39                <img src="Pic-8-8/img03.jpg" alt="03"
40                     data-thumb="Pic-8-8/img03.jpg" title="第3幅图片"/>
41             </a>
42             <a href="javascript:">
43                <img src="Pic-8-8/img04.jpg" alt="04"
44                     data-thumb="Pic-8-8/img04.jpg" title="第4幅图片"/>
45             </a>
46             <a href="javascript:">
47                <img src="Pic-8-8/img05.jpg" alt="05"
48                     data-thumb="Pic-8-8/img05.jpg" title="第5幅图片"/>
49             </a>
50         </div>
51     </div>
52 </body>
53 </html>

 

posted on 2017-03-21 23:05  极速小乌龟  阅读(169)  评论(0)    收藏  举报