您的位置：首页 > Web前端 > JQuery

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

2017-03-21 23:05 169 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航