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：
eg_two：
html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" ; charset="utf-8"/>
<title>使用第三方插件</title>
<link rel="stylesheet" type="text/css" href="css/number_slideshow.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css"/>
<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="js/number_slideshow.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/home.js"></script>
<script type="text/javascript">
$(function () {
});
</script>
</head>
<body>
<div class="right">
<div id="number_slideshow" class="number_slideshow">
<ul>
<li>
<a href="">
<img src="img/floower (1).jpg" width="286px" height="190px"/>
</a>
</li>
<li>
<a href="">
<img src="img/floower (2).jpg" width="286px" height="190px"/>
</a>
</li>
<li>
<a href="">
<img src="img/floower (3).jpg" width="286px" height="190px"/>
</a>
</li>
<li>
<a href="">
<img src="img/floower (4).jpg" width="286px" height="190px"/>
</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>
</div>
</body>
</html>
home.js：
$(function(){
$("#number_slideshow").number_slideshow({
slideshow_autoplay:'enable',// 允许自动播放
slideshow_time_interval:'5000',//自动播放间隔
slideshow_window_background_color:'#ffffff',//播放背景色
slideshow_window_padding:'0',//图片与div的内边距
slideshow_window_width:'286',//播放窗口宽度
slideshow_window_height:'190',//播放窗口高度
slideshow_border_size:'0',//边框尺寸
slideshow_transition_speed:500,//转场速度
slideshow_border_color:'#006600',//边框颜色
slideshow_show_button:'enable',//允许显示按钮
slideshow_show_title:'disable',//不显示图片标题
slideshow_button_text_color:'#ffffff',//导航按钮样式
slideshow_button_current_text_color:'#ffffff',
slideshow_button_background_color:'#000066',
slideshow_button_current_background_color:'#669966',
slideshow_button_border_color:'#006600',
slideshow_loading_gif:'img/loading.gif',//动态加载图像时的加载进度图像
slideshow_button_border_size:'0'
});
});
result：
eg_two：
html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" ; charset="utf-8"/>
<title>使用第三方插件</title>
<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('#video').fancybox({
'padding': 0, //视频内边距为0
'autoScale': false, //不允许自动缩放
'transitionIn': 'none', //不允许转入和转出的转场效果
'transition': 'none'
})
});
</script>
</head>
<body>
<a class="video" href="video/郁金香.mp4">
<img alt="" width="300px" height="200px" src="img/floower (4).jpg"/>
<div class="btn"></div>
</a>
</body>
</html>
result：
Me discréditer résister, peut supporter beaucoup de compliments!
浙公网安备 33010602011771号