原生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参数
 

 

 

 
参数
 
默认值
 
说明
 
 
 

 

 
circle
 
true
 
是否生成底部圆圈按钮
 
 

 
speeds
 
20
 
设置缓冲运动速度
 
 

 
pnBtn
 
true
 
是否生成左右切换按钮
 
 

 
autoPlay
 
true
 
是否自动轮播
 
 

 
times
 
3000
 
设置自动轮播间隔时间
 
 
 
 
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！