原生js实现轮播插件(支持左右箭头、圆点按钮、兼容IE8)(原创)

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

 25117  271  查看评论 (5)
分享到微信朋友圈
X
原生js实现轮播插件(支持左右箭头、圆点按钮、兼容IE8)(原创) ie兼容8

发布时间:2019-05-15 00:22:04

这是一款使用原生js实现的轮播插件,支持左右箭头切换,圆点按钮切换,自动轮播,兼容IE8,封装插件,代码注释全面,代码易修改,简单的语法。使用时只需要引入css及js相关文件,并在html写一个容器,配置构造实例的参数启用

html:

<!-- 容器 -->
<div id="container"></div>

css:

/*容器尺寸*/
#container{
    width:960px;
    height:430px;
}
<link rel="stylesheet" href="css/reset.css"> <!-- 重置样式 -->
<link rel="stylesheet" href="css/bannerSlide.css"> <!-- 插件样式 -->

javascript:

<!-- 封装的插件js -->
  var bannerSlide = new BannerSlide({
     container: '#container',
     /*容器 必须*/
     imagesSrc: ['images/t1.png', 'images/t2.png', 'images/t3.png', 'images/t4.png'],
     /*图片路径 必须*/
     speed: 3000,
     /*轮播切换速度 可选*/
     switchEffect: { /*切换效果配置 可选*/
         slide: true,
         /*轮播*/
         arrow: true,
         /*箭头*/
         radius: true /*圆点*/
     }
 });
相关插件-幻灯片和轮播图

带进度条的jQuery轮播图

带进度条jQuery轮播图,可左右切换、按钮切换
  幻灯片和轮播图
 39146  369

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

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

jQuery轮播图支持手机端拖拽轮播(原创)

jQuery轮播图支持移动端拖拽轮播,兼容性好
  幻灯片和轮播图
 17604  251

模板京东淘宝点击购物网站jQuery多图切换代码

模板京东淘宝点击购物网站jQuery多图切换代码。
  幻灯片和轮播图
 35202  432

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

    房东的猫 0
    2019/6/30 13:25:35
    yusinan0119 0
    2019/5/21 10:24:39
    这个好用吗
        62134679053768750
        2019/5/26 15:54:44
        有个东西叫sweiper
    回复
    __"沙漏 0
    2019/5/17 15:31:48
    很好用!!!!!
        ☆浪迹@天涯0
        2019/6/19 17:27:44
        我也觉得
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复