JQ 最少代码实现无缝滚动

iteye_17658

于 2017-01-19 14:50:53 发布

阅读量242

点赞数

分类专栏：境-JS 文章标签： JQ无缝滚动 JQ最少代码实现 JQ滚动

境-JS 专栏收录该内容

197 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简单元素滚动效果。通过定时调整列表的左边距，使列表项依次滚动显示。该效果适用于网站轮播图或者新闻滚动条等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
</head>
<body>
<style>
#roll{ width: 450px; height:112px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; }
#roll ul{ width: 450px; height:100px;}
#roll ul li{ float: left; width: 100px; height: 100px; border:#ccc solid 1px; display: block; margin: 5px;}
</style>
<div id="roll">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
</div>
<script>
function rolling(){
	$('#roll ul').animate({'margin-left':'-110px'},function(){
		$('#roll ul li:eq(0)').appendTo($('#roll ul'));
		$('#roll ul').css({'margin-left':0});
	})
}
setInterval(rolling,1000);
</script>
</body>
</html>

效果图：