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>
时间： 2024-10-25 22:58:54