HTML:
<!DOCTYPE html><html> <head> <meta http-equiv="content-type" content="text/html" ; charset="utf-8"/> <title></title> <link href="css/number_slideshow.css" rel="stylesheet" type="text/css"/> <script src="js/jquery-2.2.2.min.js"></script> <script src="js/number_slideshow.js"></script> <script type="text/javascript"> $(function () { $("#number_slideshow").number_slideshow({ slideshow_autoplay: ‘enable‘,//enable disable slideshow_time_interval: ‘3000‘, slideshow_transition_speed: 500, //‘normal‘,‘slow‘,‘fast‘ or numeral slideshow_window_background_color: "#ccc", slideshow_window_padding: ‘1‘, slideshow_window_width: ‘286‘, slideshow_window_height: ‘190‘, slideshow_border_size: ‘1‘, slideshow_border_color: ‘black‘, slideshow_show_button: ‘enable‘,//enable disable slideshow_show_title: ‘enable‘,//enable disable slideshow_button_text_color: ‘#CCC‘, slideshow_button_background_color: ‘#333‘, slideshow_button_current_background_color: ‘#666‘, slideshow_button_current_text_color: ‘#000‘, slideshow_button_border_color: ‘#000‘, slideshow_loading_gif: ‘loading.gif‘,//loading pic position, you can replace it use youself gif. slideshow_button_border_size: ‘1‘ }); }); </script> </head> <body><div id="number_slideshow" class="number_slideshow"> <ul> <li><a href="#"><img src="img/floower (1).jpg" width="286" height="190" alt="slideshow_large"/></a></li> <li><a href="#"><img src="img/floower (2).jpg" width="286" height="190" alt="slideshow_large"/></a></li> <li><a href="#"><img src="img/floower (3).jpg" width="286" height="190" alt="slideshow_large"/></a></li> <li><a href="#"><img src="img/floower (4).jpg" width="286" height="190" alt="slideshow_large"/></a></li> </ul> <ul class="number_slideshow_nav"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> <div style="clear: both"></div></div> </body> </html>
result:
时间: 2024-11-09 00:02:41