JS运动 - 无缝滚动和缓动动画

• 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0.

html

JS

效果图

• 缓动动画(减速运动)原理 : 记住公式

假如:初始值 leader = 0; 目标值 target = 400; speed = 10;公式如下

leader = leader + (target - leader) / speed;

HTML

    
                
    
        
     
            
      
            
      
            
      
            
      
        
     
        
     
            
      
1
            
      
2
            
      
3
            
      
4
        
     
    
    

JS

效果图