Code

SlideShow javascript jquery plugin
图片幻灯效果

这是一个基于jquery的幻灯插件，使用简单。可自定义效果

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

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

3.数字导航功能

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

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

效果预览-1(横向滑动)
效果预览-2(纵向滑动)
效果预览-3(不显示数字导航)
代码
1.在body里加入如下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.在head里加入css：

<style type="text/css">
    html
    {
        color: #000;
        background: #FFF;
    }
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
    pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td
    {
        margin: 0;
        padding: 0;
    }
    table
    {
        border-collapse: collapse;
        border-spacing: 0;
    }
    fieldset, img
    {
        border: 0;
    }
    address, caption, cite, code, dfn, em, strong, th, var
    {
        font-style: normal;
        font-weight: normal;
    }
    li
    {
        list-style: none;
    }
    caption, th
    {
        text-align: left;
    }
    h1, h2, h3, h4, h5, h6
    {
        font-size: 100%;
        font-weight: normal;
    }
    q:before, q:after
    {
        content: '';
    }
    abbr, acronym
    {
        border: 0;
        font-variant: normal;
    }
    /* to preserve line-height and selector appearance */
    sup
    {
        vertical-align: text-top;
    }
    sub
    {
        vertical-align: text-bottom;
    }
    input, textarea, select
    {
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
    }
    /*to enable resizing for IE*/
    input, textarea, select
    { *font-size:100%;}
    /*because legend doesn't inherit in IE */
    legend
    {
        color: #000;
    }
    del, ins
    {
        text-decoration: none;
    }


    /*容器*/
    #slider ul, #slider li,#slider2 ul, #slider2 li
    {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size:0;
    }
    /*数字导航样式*/
    #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;
    }
</style>
3.在head里引入js文件：

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jquery.flashSlider.js" type="text/javascript"></script>
4.继续在head里加入js代码：

//效果1的js
<script type="text/javascript">
    $(document).ready(function() {
        $("#slider").flashSlider();
    });
</script>


//效果2的js
<script type="text/javascript">
    $(document).ready(function() {
        $("#slider").flashSlider({
            vertical: true
        });
    });
</script>


//效果3的js
<script type="text/javascript">
    $(document).ready(function() {
        $("#slider").flashSlider({
            controlsShow: false
        });
    });
</script>





</script>
5.参数列表：
参数名 默认值 说明
controlsShow true 是否显示数字导航
vertical false 纵向还是横向滑动
speed 800 滑动速度
auto true 是否自动滑动
pause 2000 两次滑动暂停时间
height 0 容器高度，不设置自动获取图片高度
width 0 容器宽度，不设置自动获取图片宽度
Drew Wilson Network