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

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

30073 300 查看评论 (5)

分享到微信朋友圈

查看演示立即下载

插件描述：支持左右箭头、圆点按钮、代码注释全、可控效果按钮接口、简单语法、兼容IE8

发布时间：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 /*圆点*/
     }
 });

表单美化兼容所有快捷键

仿微信下拉弹动效果(原创)