好资源导航 » 文章资讯 » js实现轮播图效果纯js实现图片自动切换

js实现轮播图效果纯js实现图片自动切换

2023-07-19 01:41:04 67

本文实例为大家分享了纯js实现图片自动切换的具体代码，供大家参考，具体内容如下

1.鼠标经过的时候左右两个小按钮会自动弹出，自动播放停止，点击左右小按钮可以切换图片；
2.鼠标离开，恢复自动播放；
3.点击下方中间几个小圆圈，也会自动切换图片；

源代码：









Document








>

5.Js文件的代码

//封装了一个动画js文件
functionanimation(obj,target,fn1){
//console.log(fn1);
//fn是一个回调函数，在定时器结束的时候添加
//每次开定时器之前先清除掉定时器
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//步长计算公式越来越小
//步长取整
varstep=(target-obj.offsetLeft)/10;
step=step>0?Math.ceil(step):Math.floor(step);

if(obj.offsetLeft==target){
clearInterval(obj.timer);
//如果fn1存在，调用fn
if(fn1){
fn1();
}
}else{
//每50毫秒就将新的值给obj.left
obj.style.left=obj.offsetLeft+step+'px';
}
},30)
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

js实现轮播图效果 纯js实现图片自动切换

热门推荐

随机推荐

js实现轮播图效果纯js实现图片自动切换