作者:幼儿之家燕郊_880 | 来源:互联网 | 2022-02-25 19:16
本文实例为大家分享了纯js实现图片自动切换的具体代码,供大家参考,具体内容如下
1.鼠标经过的时候左右两个小按钮会自动弹出,自动播放停止,点击左右小按钮可以切换图片;
2. 鼠标离开,恢复自动播放;
3. 点击下方中间几个小圆圈,也会自动切换图片;
源代码:
5.Js文件的代码
// 封装了一个动画js文件
function animation(obj,target,fn1){
// console.log(fn1);
// fn是一个回调函数,在定时器结束的时候添加
// 每次开定时器之前先清除掉定时器
clearInterval( obj.timer);
obj.timer = setInterval(function(){
// 步长计算公式 越来越小
// 步长取整
var step = (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)
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。