当前位置: 软件>JavaScript软件
基于Jquery的图片展示插件 flashSlider
本文导语: 大多数的jquery图片幻灯片插件都只是提供了“上一个”“下一个”操作,没有实现数字导航,比如Easy Slider ,写这个插件也主要是在Easy Slider基础上改动的,由于有点像flash图片展示的效果,所以就叫flashSlider吧 flashSlider的功能 ...
大多数的jquery图片幻灯片插件都只是提供了“上一个”“下一个”操作,没有实现数字导航,比如Easy Slider ,写这个插件也主要是在Easy Slider基础上改动的,由于有点像flash图片展示的效果,所以就叫flashSlider吧
flashSlider的功能
1.支持纵向滑动和横向滑动
2.支持自动滚动和连续滑动
3.数字导航功能
4.自定义容器高度和宽度
5.可设置滑动速度、是否自动、停顿间隔
6.支持Jquery的easing效果(更多效果需要easing插件的支持,默认是swing)
flashSlider的使用方法
1.首先是是Html标记
>
>
>
>
-
>
div>
2.然后调用jQuery库和flashSlider插件
>
3.初始化代码
$(document).ready(function() {
$("#slider").flashSlider();
});
script>
4.加入css样式
/*容器*/
slider ul, #slider li
{
margin: 0;
padding: 0;
list-style: none;
}
/*数字导航样式*/
#flashnvanum
{
bottom: 10px;
position: absolute;
right: 20px;
width: 90px;
}
#flashnvanum span
{
background: transparent url(/images/flashbutton.gif) no-repeat scroll -15px 0;
color: #86A2B8;
cursor: pointer;
float: left;
font-family: Arial;
font-size: 12px;
height: 15px;
line-height: 15px;
margin: 1px;
text-align: center;
width: 15px;
}
#flashnvanum span.on
{
background: transparent url(/images/flashbutton.gif) no-repeat scroll 0 0;
color: #FFFFFF;
height: 15px;
line-height: 15px;
width: 15px;
}
flashSlider的默认参数
//默认值
$.fn.flashSlider.defaults = {
controlsShow: true, //是否显示数字导航
vertical: false, //纵向还是横向滑动
speed: 800, //滑动速度
auto: true, //是否自定滑动
pause: 2000, //两次滑动暂停时间
easing: "swing", //easing效果,默认swing,更多效果需要easing插件支持
height: 0, //容器高度,不设置自动获取图片高度
width: 0//容器宽度,不设置自动获取图片宽度
}