jQuery轮播图三种轮播方式(原创) |
您所在的位置：网站首页 › jsp轮播图怎么实现 › jQuery轮播图三种轮播方式(原创) |
jQuery轮播图三种轮播方式(原创)
|
jQuery轮播图三种轮播方式(原创)
所属分类：媒体-幻灯片和轮播图 32206 321 查看评论 (18) 分享到微信朋友圈X
查看演示
website
立即下载
插件描述：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 PREVIOUS: NEXT: 手机端省市县三级联动 jQuery表情插件jquery.emoji.js 相关插件-幻灯片和轮播图 查看更多
jQuery.slidizle可完全自定义的响应式jQuery幻灯片插件
jQuery.slidizle是一款可完全自定义的响应式jQuery幻灯片插件。该插件只是将一些class类放置到幻灯片的HTML标签中，用户可以通过修改这些class来修改幻灯片的外观。
幻灯片和轮播图
32006
358
jQuery轮播图插件
jQuery滑动式轮播图插件
幻灯片和轮播图
35963
333
jQuery轮播图支持手机端拖拽轮播(原创)
jQuery轮播图支持移动端拖拽轮播，兼容性好
幻灯片和轮播图
19173
260
全屏无缝滚动加透明遮罩效果
全屏滚动JS 带有遮罩效果
幻灯片和轮播图
33086
392
讨论这个项目（18）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
Tattoo 0
2019/2/16 0:53:59
是不是不能和其他插件在同一个网页里一起使用？为什么我的图片不显示
陈先生有酒有故事丶0
2019/2/20 20:31:24
可以同时使用，可以检查一下是不是报错了，还是dom没渲染成功。有什么问题可以加我qq：996578843
回复
Tattoo 0
2019/2/16 0:36:45
请问这个框可以改大小的吗
陈先生有酒有故事丶0
2019/2/20 20:30:48
大小在css里自己改哈
回复
忧郁的熊猫丶╂ 0
2018/7/31 17:06:21
怎样增加小圆点的触发方式，鼠标停在图片上时图片切换？
陈先生有酒有故事丶0
2018/8/16 13:34:13
这个要重新改一下源码，可以联系我
回复
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
鼠标方图片上，也停止定时器，如何改？
陈先生有酒有故事丶1
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
清楚定时器，不管用。
陈先生有酒有故事丶1
2018/1/3 11:20:59
我设置的是移入小圆点和左右箭头清除 回复
乐瓜 0
2017/12/25 22:28:35
麻烦问下，左右的小箭头能不能隐藏了，鼠标放在图片上的时候才显示啊
陈先生有酒有故事丶0
2017/12/26 10:34:53
这个可以啊。你可以直接改我的源码，加一个就好了。或者更简单的用css就好了。如果还有其他问题可以联系我，QQ996578843
回复
查看更多评论
登录后才可以评论
30秒后在评论吧!
😃😀😉😥😵😫😘😡👍🌹👏🍺🍉🌙⭐💖💔
😃😀😉😥😵😫😘😡👍🌹👏🍺🍉🌙⭐💖💔
取消回复
|
【本文地址】
今日新闻 |
推荐新闻 |