!
也想出现在这里? 联系我们
广告位

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

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

使用方法

引入文件

<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

[b2_file link="

百度网盘" name="仿亚马逊风格图片滚动效果" pass="" code=""]

给TA打赏
共{{data.count}}人
人已打赏
脚本代码

[代码样式]WordPress时间函数the_tiem()详解

2020-11-20 15:02:25

脚本代码

[代码样式]jQuery跟随滚动插件Scroll Follow

2020-11-20 15:02:27

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索