css加JS通知滚动【垂直】

html部分

		<div class="adBox">
			<ul id="adcont">
				<li class="adtitle">
					广告1
				</li>
				<li class="adtitle">
					广告2
				</li>
				<li class="adtitle">
					广告3
				</li>
				<li class="adtitle">
					广告4
				</li>
			</ul>
		</div>

Css部分

.adBox{
    width: 100%;
    height: 40px;
    margin-top: 10px;
    padding-left: 20px;
    background-color: #f6f6f6;
    overflow: hidden;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

.adtitle{
    height: 40px;
    width: 100%;
    line-height: 40px;
    float: left;
    display: inline;
    font-size: 16px;
    color: #fa614d;
}

JS部分

<script>
	let marginTop = 0;
	let scroll = true;
	//定时函数，每1S执行一次
	setInterval(function (){
		if(scroll)
		{
			$('#adcont li:first').animate(
				{marginTop:marginTop--},
				0,
				function (){
					if( -marginTop === $(this).height()+1)
					{
						let $f = $(this);
						$(this).remove();
						marginTop = 0;
						$f.css("margin-top","0px");
						$("ul").append($f);
					}
				}
			);
		}
	},50);
	$(function (){
		$("ul").hover(function (){
			scroll = false;
		},function (){
			scroll =true
		});
	})
</script>