基于jquey实现的轮播插件(原创)

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

 29390  279  查看评论 (11)
分享到微信朋友圈
X
基于jquey实现的轮播插件(原创) ie兼容11

发布时间:2019-05-28 22:36:40

这是一款使用jquery实现的轮播插件,支持左右箭头切换,触摸切换,轮播点显示,自动轮播,代码注释全面,代码易修改,简单的语法。

使用时只需要引入css及js相关文件,并在html写一个容器,配置构造实例的参数启用。

html:

<!-- 容器 -->
<div >
       <div ></div>
       <div > </div>
       <div ><img src="./img/arrow-left.png" alt=""></div>
       <div ><img src="./img/arrow-right.png" alt=""></div>
</div>

css:

<!-- 样式 -->
<link rel="stylesheet" href="./css/index.css">

js:

/**
 * 参数:
 * 1.最外层父元素  必填项
 * 2.图片地址数组  必填项
 * 3.配置信息      非必填
 * 4.轮播图创建完毕回调,回调中返回轮播对象数组,可用于后续逻辑处理  非必填
 */
swiper.init($(".swiper-main"), [
    "./img/1.jpg",
    "./img/2.jpg",
    "./img/3.jpg",
    "./img/4.jpg"
], {
    arrowtype: 'move', //可选,默认一直显示 - 'move' / 'none'(鼠标移上显示 / 不显示 )
    autoplay: true, //可选,默认true - true / false (开启轮播/关闭轮播)
    cantouch: true, //可选,默认true - true / false (开启拖拽切换/关闭拖切换)
    time: 3000 //可选,默认3000
}, function(list) {
    console.log("create success", list);
})
相关插件-幻灯片和轮播图

js简单的banner图片切换焦点图代码

js简单的banner图片切换焦点图代码
  幻灯片和轮播图
 37636  350

jQuery响应式轮播图,无缝大屏滚动插件(原创)

代码清晰,动画流畅,无bug的banner滚动轮播
  幻灯片和轮播图
 35438  331

好玩的蹦床效果轮播图

一个有趣的内容导航效果,使用可拖动的弹性堆栈和Snap.svg动画像蹦床一样的背景形状。
  幻灯片和轮播图
 24121  360

jQuery轮播图插件slider

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

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    jugeJquery 0
    2020/5/21 17:02:44
    dseven 0
    2019/11/28 17:14:30
    不错的,就是没自适应 回复
    d13485349397 0
    2019/9/19 17:40:59
    移动端可以用吗
    回复
    养乐多. 0
    2019/9/17 11:03:52
    箭头按钮点太快会有问题
    回复
    ashy 0
    2019/8/31 0:40:01
    原点按钮点不了? 回复
    周平平 0
    2019/7/8 14:36:26
    为什么pc端有触摸事件,可以滑动到下一张,移动端不可以呢?
        周平平0
        2019/7/8 14:42:23
        好了 我知道了 感谢分享
    回复
    ? 0
    2019/6/11 12:11:56
    派大星 0
    2019/6/9 21:55:42
    下载下来就行了 回复
    LKLS 0
    2019/6/5 18:22:27
    不能加超链接的?哥们
        xuehaoyu0
        2019/6/7 22:28:25
        超链接???你要哪里加超链接 最新版的 我应该写了点击回调 可以直接做操作的
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复