css加JS通知滚动【垂直】

最新推荐文章于 2024-04-01 23:44:34 发布

原创最新推荐文章于 2024-04-01 23:44:34 发布 · 320 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5 #javascript

编程心得专栏收录该内容

12 篇文章

订阅专栏

这段代码展示了如何使用HTML、CSS和JavaScript实现一个网页广告条的自动轮播效果。广告条包含四个条目，通过设置定时器实现平滑滚动，并在到达底部时重新插入到列表顶部，形成无缝轮播。当鼠标悬停在广告条上时，滚动暂停，移开后继续滚动。

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>