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>