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

本文实例为大家分享了纯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)
}

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