仿亚马逊风格图片滚动效果

分类:代码 日期:

仿亚马逊风格图片滚动效果

使用方法

引入文件

<link rel="stylesheet" href="css/amazon_scroller.css">
<script src="js/jquery.min.js"></script>
<script src="js/amazon_scroller.js"></script>

HTML

<div id="amazon_scroller1" class="amazon_scroller">
    <div class="amazon_scroller_mask">
        <ul>
            <li><a href="" title="精通CSS"><img src="images/11.jpg" alt=""></a></li>
            <li><a href="" title="CSS设计彻底研究"><img src="images/12.jpg" alt=""></a></li>
            <li><a href="" title="锋利的jQuery"><img src="images/13.jpg" alt=""></a></li>
            <li><a href="" title="PHP与MySQL5程序设计"><img src="images/14.jpg" alt=""></a></li>
            <li><a href="" title="重构HTML"><img src="images/15.jpg" alt=""></a></li>
            <li><a href="" title="SEO教程"><img src="images/16.jpg" alt=""></a></li>
        </ul>
    </div>

    <ul class="amazon_scroller_nav">
        <li></li>
        <li></li>
    </ul>
</div>

如果要显示标题,标题必须写在 a 标签的 title 属性里,如上面的 HTML 代码。

JavaScript

$(function() {
    $("#amazon_scroller1").amazon_scroller({
        scroller_title_show: 'enable',
        scroller_time_interval: '4000',
        scroller_window_padding: '20',
        scroller_border_size: '2',
        scroller_border_color: '#9c6',
        scroller_images_width: '110',
        scroller_images_height: '140',
        scroller_title_size: '12',
        scroller_title_color: 'black',
        scroller_show_count: '3',
        directory: 'images'
    });
});

参数

参数 说明
scroller_time_interval 滚动间隔,默认为 3000ms
scroller_title_show 是否显示标题,可选 enable(显示)和 disable(不显示),默认为 enable(显示)
scroller_window_background_color 背景颜色,默认为 white(白色)
scroller_window_padding 内边距,默认为 5px
scroller_border_size 边框大小,默认为 1px
scroller_border_color 边框颜色,默认为 black(黑色)
scroller_images_width 图片宽度,默认为 70px
scroller_images_height 图片高度,默认为 50px
scroller_title_size 标题字体大小,默认为 12px
scroller_title_color 标题字体颜色,默认为 black(黑色)
scroller_show_count 图片可见数量,默认为 3
directory 控制按钮背景路径,默认为 images
查看演示

下载本素材需消耗 50 积分

无法下载?立即反馈