[代码样式]仿亚马逊风格图片滚动效果

脚本代码
20年11月20日
编辑

锐梦琪

[代码样式]仿亚马逊风格图片滚动效果

使用方法

引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/amazon_scroller.css" rel="external nofollow" >
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/amazon_scroller.js"></script>

HTML

<div id="amazon_scroller1" class="amazon_scroller">
    <div class="amazon_scroller_mask">
        <ul>
            <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  title="精通CSS"><img src="https://www.dowebok.com/images/11.jpg" alt=""></a></li>
            <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  title="CSS设计彻底研究"><img src="https://www.dowebok.com/images/12.jpg" alt=""></a></li>
            <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  title="锋利的jQuery"><img src="https://www.dowebok.com/images/13.jpg" alt=""></a></li>
            <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  title="PHP与MySQL5程序设计"><img src="https://www.dowebok.com/images/14.jpg" alt=""></a></li>
            <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  title="重构HTML"><img src="https://www.dowebok.com/images/15.jpg" alt=""></a></li>
            <li><a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  title="SEO教程"><img src="https://www.dowebok.com/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