<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style:none;
}
li{
width: 100px;
height:60px;
font-weight:bold;
line-height:60px;
text-align: center;
float: left;
}
li:nth-child(1),li:nth-child(6){
background:red;
}
li:nth-child(2),li:nth-child(7){
background:blue;
}
li:nth-child(3),li:nth-child(8){
background:red;
}
li:nth-child(4),li:nth-child(9){
background:green;
}
li:nth-child(5),li:nth-child(10){
background:gray;
}
div{
position: relative;
width: 500px;
height:60px;
margin:0 auto;
overflow:hidden;
border:1px solid #000;
}
ul{
position: absolute;
top:0;
left:0;
}
</style>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$("ul").append($("li").clone());
$("ul").width($("li").size()*100);
var t,s=0;
function move(){
t = setInterval(function(){
s--;
$("ul").css("left",s)
if(s==-500){
s=0
}
},16)
}
move();
$(".box").on("mouseenter",function(){
clearInterval(t);
})
$(".box").on("mouseleave",function(){
move();
})
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style:none;
}
li{
width: 100px;
height:60px;
font-weight:bold;
line-height:60px;
text-align: center;
float: left;
}
li:nth-child(1),li:nth-child(6){
background:red;
}
li:nth-child(2),li:nth-child(7){
background:blue;
}
li:nth-child(3),li:nth-child(8){
background:red;
}
li:nth-child(4),li:nth-child(9){
background:green;
}
li:nth-child(5),li:nth-child(10){
background:gray;
}
div{
position: relative;
width: 500px;
height:60px;
margin:0 auto;
overflow:hidden;
border:1px solid #000;
}
ul{
position: absolute;
top:0;
left:0;
}
</style>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$("ul").append($("li").clone());
$("ul").width($("li").size()*100);
var t,s=0;
function move(){
t = setInterval(function(){
s--;
$("ul").css("left",s)
if(s==-500){
s=0
}
},16)
}
move();
$(".box").on("mouseenter",function(){
clearInterval(t);
})
$(".box").on("mouseleave",function(){
move();
})
</script>
</body>
</html>