svip

html

1. <li><a href="/" target="_blank"
   
2.                                                                                                         title="标题文字1">标题文字1</a></li>
   
3.                                                                                         <li><a href="/" target="_blank"
   
4.                                                                                                         title="标题文字122">标题文字122</a></li>
   
5.                                                                                         <li><a href="/" target="_blank"
   
6.                                                                                                         title="标题文字133">标题文字133</a></li>

复制代码

js

1. window.addEventListener('load', function() {
   
2.   var ul = document.querySelector('.infoList');
   
3.   var lis = ul.querySelectorAll('li');
   
4.   var liHeight = lis[0].offsetHeight;
   
5.   var index = 0;
   
6.   var timer;
   
7. 
   
8.   function animate() {
   
9.     index++;
   
10.     ul.style.transform = 'translateY(-' + index * liHeight + 'px)';
    
11.     ul.style.transition = 'transform 0.5s';
    
12.   }
    
13. 
    
14.   function reset() {
    
15.     index = 0;
    
16.     ul.style.transform = 'translateY(0)';
    
17.     ul.style.transition = 'none';
    
18.   }
    
19. 
    
20.   function startAnimation() {
    
21.     timer = setInterval(function() {
    
22.       animate();
    
23.       if (index >= lis.length - 1) {
    
24.         setTimeout(reset, 500);
    
25.       }
    
26.     }, 2000);
    
27.   }
    
28. 
    
29.   startAnimation();
    
30. });

复制代码