標籤:default http link java after rand 隨機 random xhtml
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>
jQuery-圖片輪播-隨意切換圖片