基于jQuery的公告无限循环滚动实现代码-原创手记-慕课网

基于jQuery的公告无限循环滚动实现代码，效果如下，多用于pc端电商网站之中不断的循环更新的公告消息。

写一个简单的小demo：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>基于jQuery的公告无限循环滚动实现代码</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
			}
			
			body {
				line-height: 1.5;
				font-size: 14px;
			}
			
			.scroll {
				display: inline-block;
				overflow: hidden;
				position: relative;
				height: 50px;
			}
			
			.scroll ul {
				transform: translateY(0);
			}
			
			.animate {
				-webkit-transition: all .3s ease-out;
			}
			
			.scroll li {
				overflow: hidden;
				display: -webkit-box;
				margin-left: 10px;
				width: 90%;
				height: 50px;
				line-height: 30px;
				color: #333;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				white-space: normal;
			}
			
			.scroll li  img{
				margin-top: 20px;
				margin-right: 12px;
				width: 12px;
				height: 12px;
				
			}
		</style>

	</head>

	<body>
		<div class="scroll">
			<ul>
				<li><img src="message.png" /><span>前端妹子是我吗</span></li>
				<li><img src="message.png" />对呀，我就是前端妹子啊</li>
				<li><img src="message.png" />哈哈哈你是谁呀</li>
				<li><img src="message.png" />你猜猜我是哪个</li>
			</ul>
		</div>
	</body>
	<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	
	<script>
		$(function() {
			var scrollDiv = $(".scroll"),
				$ul = scrollDiv.find("ul"),
				$li = scrollDiv.find("li"),
				$length = $li.length,
				$liHeight = $li.height(),
				num = 0;

			if(scrollDiv.length == 0) {
				return;
			}

			if($length > 1) {
				$ul.append($li.eq(0).clone());
				setInterval(
					function() {
						num++;
						$ul.addClass("animate").css("-webkit-transform", "translateY(-" + $liHeight * (num) + "px)");
						setTimeout(
							function() {
								if(num == $length) {
									$ul.removeClass("animate").css("-webkit-transform", "translateY(0)");
									num = 0;
								}
							}, 300);
					}, 3000);
			}
		});
	</script>

</html>

热门推荐：全栈工程师开发常用插件、工具类库，视频，资料300G资源汇总

基于jQuery的公告无限循环滚动实现代码原创