flashSlider——基于Jquery的图片展示插件

大多数的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>
            <li>
                <img src="images/02.jpg" alt="" />li>
            <li>
                <img src="images/03.jpg" alt="" />li>
            <li>
                <img src="images/04.jpg" alt="" />li>
            <li>
                <img src="images/05.jpg" alt="" />li>
        ul>
    div>

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

    <script src="javascript/jquery-1.3.2.min.js" type="text/javascript">script>
    <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//容器宽度,不设置自动获取图片宽度
    }
源代码: http://files.cnblogs.com/dushouke/jquery.flashSlider1.0.rar
posted @ 2009-12-30 21:49 MicroCoder 阅读(...) 评论(...) 编辑 收藏