jQuery轮播图三种轮播方式(原创)

所属分类：媒体-幻灯片和轮播图

37708 348 查看评论 (19)

分享到微信朋友圈

查看演示立即下载

插件描述：jQuery轮播图插件，无缝轮播，支持三种轮播方式，附有节流，拥有八个参数

更新时间：2018/1/11 下午5:55:06

更新说明：

1. 美化了index.html的展示页，压缩了JS代码

2. 简化了参数名，更为简单易记

$('#banner1').myscroll({
    picEl: $('#move'), //图片父级，不传默认为banner内第1个div
    ctrlEl: $('#ctrl'), //控制条父级，包括小圆点和左右箭头，不传默认为banner内第2个div
    libs: true, //是否创建底部小圆点，true || false,不传默认true
    arrows: true, //是否创建左右箭头，true || false,不传默认true
    autoPlay: true, //是否自动播放，true || false,不传默认true
    time: 1000, //自动播放间隔时间，true || false,不传默认2000
    speed: 400, //图片切换速度，不传默认400
    effect: 'left' //轮播的改变方式 top||left||fade，不传默认left
});

3. 添加了一些说明

（1）可以使用参数默认值简单调用：$('#banner2').myscroll();

（2）不仅可用作轮播图、焦点图、也可以用作tab切换卡等功能,即更改li内相应的结构即可

（3）默认向底部libs写入单独类名，lib1，lib2，lib3，可用于自定义样式,当前索引的类名为active,具体可在调用后查看dom结构

（4）默认向左右箭头添加内容<>,若使用图片自定义箭头样式，在css内写入font-size：0;箭头即可消失

（5）默认移入小圆点和左右箭头清除定时器，需要移入banner清除自行更改源码或联系我

（6）需要更改底部lib显示位置，在css选择器ctrl中更改text-align值即可

更新时间：2017/12/24 上午12:25:40

更新说明：更新了index的展示内容。添加了一些css注释.

$(function() {
        //调用
        $('.banner').myscroll({
            picElem: $('#move'), //图片父级
            ctrlElem: $('#ctrl'), //控制条父级(包括小圆点和左右箭头)
            isLibs: true, //是否创建底部小圆点(样式均可自定义调整),默认向lib添加单独类名，详情见调用后dom结构
            isArrows: true, //是否创建左右箭头(样式均可自定义调整)
            autoPlay: true, //是否自动播放
            playTime: 2000, //自动播放间隔时间
            playSpeed: 700, //图片切换速度 
            effect: 'left' //轮播的改变方式 top(向上) left(向左) fade(淡入淡出)
        });
    })

底部小圆点和左右箭头样式可自定义，默认向每个libs添加单独类名，libs1 libs2 libs3.

可以在调用成功后通过审查元素查看dom

手机端省市县三级联动

jQuery表情插件jquery.emoji.js