标签:
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:
标签:
原文地址:http://www.cnblogs.com/theWayToAce/p/5530888.html