上下滚动播放效果

1、js

			//滚动播放动画效果
			animationUp();
			function animationUp(){
    
    
				let liDome = document.getElementsByClassName('item'),
					ulDome = document.getElementsByClassName('list')[0],
				    lis = Array.prototype.slice.call(liDome),
				    liLen = lis.length,
					$li = document.getElementsByClassName('item')[0],
					$li2 = document.getElementsByClassName('item')[1],
					$end = document.getElementsByClassName('item')[liLen-1],
					$end2 = document.getElementsByClassName('item')[liLen-2],
					i = 0;
					console.log(liLen);
				setInterval(()=>{
    
    
					i = i+2;
					if(i == liLen -2){
    
    						
						ulDome.style.marginTop = "-"+(i)*41+'px';
						setTimeout(()=>{
    
    
							i = 0;
							ulDome.style.transitionDuration = null;							
							ulDome.style.marginTop = "-"+(i)*41+'px';
						},3000)
					}
					if(i < liLen-2){
    
    
						ulDome.style.transitionDuration = '2s';						
						ulDome.style.marginTop = "-"+(i)*41+'px';
					}
				},3000);				
			}

2、HTML

		<div class="box">
			<ul class="list">				
				<li class="item">item1</li>
				<li class="item">item2</li>
				<li class="item">item3</li>
				<li class="item">item4</li>
				<li class="item">item5</li>
				<li class="item">item6</li>
				<li class="item">item7</li>
				<li class="item">item8</li>				
			</ul>
		</div>

3、css样式

			.box{
    
    
				width: 400px;
				height: 88px;
				overflow: hidden;
			}
			ul.list{
    
    
				margin-top: -0px; 
				padding: 0;
			}
			ul>li{
    
    
				list-style-type: none;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #EEEEEE;
			}