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

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

响应式轮播

jQuery响应式轮播图插件
  幻灯片和轮播图
 35095  273

带缩略图的图片点击切换

jCarousel带缩略图的图片点击切换插件
  幻灯片和轮播图
 12317  62

响应式banner,带手指换的特效,自定义设置属性

响应式banner,支持移动端手指滑动切换,自定义设置属性
  幻灯片和轮播图
 27351  217

jQuery图片轮播插件jquery.tiles.js

jquery.tiles图片切换插件,支持多达12种特效、22个自定义参数;支持随机顺序、循环、正反方向、导航、缩略图;幻灯片播放前、中、后自定义事件等,相信可以满足绝大多数需求。
  幻灯片和轮播图
 9197  73

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

    Jack 0
    2018/5/10 12:42:49
    移入banner清除定时器, 改js源码的哪里?
        陈先生有酒有故事丶0
        2018/5/12 22:30:00
        可以加我qq 我给你说一下
    回复
    妖泉 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
    回复
取消回复