开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
flashSlider首页、文档和下载 - 基于Jquery的图片展示插件 - 开源中国社区
全部项目分类
我要评价
未知
JavaScript
跨平台
分享
收藏
15 人收藏
收录时间:2010-01-07
flashSlider 详细介绍

大多数的jquery图片幻灯片插件都只是提供了“上一个”“下一个”操作,没有实现数字导航,比如Easy Slider ,写这个插件也主要是在Easy Slider基础上改动的,由于有点像flash图片展示的效果,所以就叫flashSlider吧

flashSlider的功能

   1.支持纵向滑动和横向滑动

   2.支持自动滚动和连续滑动

   3.数字导航功能

   4.自定义容器高度和宽度

   5.可设置滑动速度、是否自动、停顿间隔

   6.支持Jquery的easing效果(更多效果需要easing插件的支持,默认是swing)

flashSlider的使用方法

  1.首先是是Html标记

    <div id="slider">
<ul>
<li>
<img src="images/01.jpg" alt="" /> >
<li>
<img src="images/02.jpg" alt="" /> >
<li>
<img src="images/03.jpg" alt="" /> >
<li>
<img src="images/04.jpg" alt="" /> >
<li>
<img src="images/05.jpg" alt="" />< /li>
    >
    div>

    2.然后调用jQuery库和flashSlider插件

    <script src="javascript/jquery-1.3.2.min.js" type="text/javascript">
    >
<script src="javascript/jquery.flashSlider-1.0.min.js" type="text/javascript" script>

    3.初始化代码

    <script type="text/javascript">
$(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//容器宽度,不设置自动获取图片宽度
}

大家对 flashSlider 的评论 (全部 0 条评论)
{{repayCom.userName}}
顶部