<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
<style>
#box{
width:800px;
height:150px;
border:3px solid #333;
overflow:hidden;
}
#content{
width:10000px;
}
#imglist{
float:left;
}
#box img{
width:200px;
height:150px;
float:left;
}
</style>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<h1>无缝滚动</h1>
<hr>
<div id="box">
<div id="content">
<div id="imglist">
<img src="../images/Meinv001.jpg">
<img src="../images/Meinv002.jpg">
<img src="../images/Meinv003.jpg">
<img src="../images/Meinv004.jpg">
<img src="../images/Meinv005.jpg">
<img src="../images/Meinv006.jpg">
<img src="../images/Meinv007.jpg">
<img src="../images/Meinv008.jpg">
<img src="../images/Meinv009.jpg">
<img src="../images/Meinv010.jpg">
</div>
</div>
</div>
<script>
$("#imglist").clone().appendTo("#content");
//定时调用
setInterval(function(){
if ($("#box").scrollLeft() >= 2000) {
$("#box").scrollLeft(0);
}
$("#box").scrollLeft($("#box").scrollLeft() + 10);
}, 100);
</script>
</body>
</html>
浙公网安备 33010602011771号