<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动跑马灯</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style>
*{
margin:0;
padding:0;
}
ul li{
list-style:none;
}
.main{
width: 300px;
height:100px;
margin:100px auto;
position: relative;
overflow: hidden;
}
.main li{
float: left;
width:100px;
height:100px;
}
.main ul{
width:300px;
height:100px;
position: absolute;
left:0;
top:0;
}
.main li:nth-child(odd){
background-color: red;
}
.main li:nth-child(even){
background-color: blue;
}
</style>
<body>
<div class="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
$(".main ul").append($(".main ul").html());
$(".main ul").width($(".main ul").width()*2);
$(function(){
setInterval("my_left();",10);
});
var left = 0;
function my_left(){
left -= 20;
if(left <= -300){
left = 0;
}
console.log(left);
$('.main ul').animate({'left':left});
}
</script>
</body>
</html>
