文字走马灯

大恒大

于 2021-05-07 00:18:28 发布

阅读量108

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/kindmb/article/details/116466189

版权

前端专栏收录该内容

32 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="/template/default/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
 
	$(function(){ 
		var num = $('.notice_active').find('li').length;
		if(num > 1){			 
			setInterval(()=>{
				$(".notice_active").find('ul').animate({marginTop : "-2rem"}
					,500
					,function(){
						$(this).css({marginTop : "0rem"}).find("li:first").appendTo(this);
						}) 
			},2000) 
		} 
	});
	
</script>
<style type="text/css">
.notice_active {
	border: 1px solid #ff0000;
	height: 2rem;
	overflow: hidden;
	position: relative;
}
.notice_active ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.notice_active li.notice_active_ch a {
	color: #656972;
	font-size: 1rem;
	line-height: 2rem;
}
</style>
</head>
<body>
<div class="notice_active">
  <ul>
    <li class="notice_active_ch"> <a href="#">滑动轮播1a去哦我我iwoi我i滑动轮播3滑</a> </li>
    <li class="notice_active_ch"> <a href="#">滑动轮播2滑动轮播3</a> </li>
    <li class="notice_active_ch"> <a href="#">滑动轮播3滑动轮播3</a> </li>
  </ul>
</div>
</body>
</html>

大恒大

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字走马灯

<!DOCTYPE html><html><head><title></title><meta charset="utf-8"><script type="text/javascript" src="/template/default/js/jquery-1.12.4.min.js"></script><script type="text/javascript"> $(functio
复制链接

扫一扫

专栏目录