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

使用方法

引入文件

<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'
    });
});

参数