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

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

jQuery轮播图三种轮播方式(原创) ie兼容7

更新时间: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

相关插件-幻灯片和轮播图

iSlider手机端图片滑动切换插件

iSlider.js手机幻灯片代码制作手指滑动手机端图片轮播代码
  幻灯片和轮播图
 33097  144

jQuery轮播图插件slider

强大轮播图3D效果slider,功能强大兼容性好。
  幻灯片和轮播图
 17690  149

简洁优雅,与众不同的轮播图插件

代码简洁优雅,与其他插件不同,包括各样式轮播图
  幻灯片和轮播图
 9519  98

基于swiper相应式轮播图插件

基于swiper相应式轮播图插件,带banner计时切换和支持移动端触屏切换
  幻灯片和轮播图
 4354  42

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币

    妖泉 0
    2018/2/11 10:40:37
    简单轻巧。如果加上文字过度就更好啦
        陈先生有酒有故事丶0
        2018/2/14 23:18:33
        文字可以用css3哦~
    回复
    十月人 0
    2018/1/29 16:10:42

    鼠标方图片上,也停止定时器,如何改?

        陈先生有酒有故事丶0
        2018/2/2 20:55:54
        改一下源码里面清除定时器的绑定元素就好了,改成banner、有不懂可以叫我qq
    回复
    Charming Boy 0
    2018/1/8 17:06:17

    非常好

        陈先生有酒有故事丶0
        2018/1/9 10:14:54

        感谢支持,这周我会更新一次版本,把之前有同学反馈的问题完善了一下

    回复
    柚子好像酸" 0
    2018/1/3 11:00:32

    清楚定时器,不管用。

        陈先生有酒有故事丶0
        2018/1/3 11:20:59

        我设置的是移入小圆点和左右箭头清除

    回复
    乐瓜 0
    2017/12/25 22:28:35
    麻烦问下,左右的小箭头能不能隐藏了,鼠标放在图片上的时候才显示啊
        陈先生有酒有故事丶0
        2017/12/26 10:34:53
        这个可以啊。你可以直接改我的源码,加一个就好了。或者更简单的用css就好了。如果还有其他问题可以联系我,QQ996578843
    回复
取消回复