原生js实现无缝轮播图效果

本文主要分享了原生js实现无缝轮播图效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧

话不多说,请看代码

   无缝轮播图-原生js封装 
  • slide-1
  • slide-2
  • slide-3
  • slide-4
  • slide-5

不传参数,执行默认参数,自动轮播

new bannerha("#banner1");

  • slide-1
  • slide-2
  • slide-3
  • slide-4
  • slide-5

调整自动轮播速度和缓冲速度

new bannerha("#banner2",{ circle: true, speeds: 50, pnBtn: true, autoPlay: true, times: 1500 });

  • slide-1
  • slide-2
  • slide-3
  • slide-4
  • slide-5

关闭自动轮播

new bannerha("#banner3",{ autoPlay: false });

  • slide-1
  • slide-2
  • slide-3
  • slide-4
  • slide-5

关闭左右切换按钮

new bannerha("#banner4",{ pnBtn: false });

  • slide-1
  • slide-2
  • slide-3
  • slide-4
  • slide-5

关闭底部小按钮

new bannerha("#banner5",{ circle: false });

调用方法:

new bannerha(selector,{options});

options参数

参数默认值说明
circletrue是否生成底部圆圈按钮
speeds20设置缓冲运动速度
pnBtntrue是否生成左右切换按钮
autoPlaytrue是否自动轮播
times3000设置自动轮播间隔时间

以上就是原生js实现无缝轮播图效果的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程