<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
vertical-align: top;
}
/*取消图片底部3像素距离*/
.box {
width: 300px;
height: 200px;
margin: 100px auto;
background-color: pink;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.box ul li {
float: left;
}
.box ul {
width: 1500px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box" id="screen">
<ul>
<li><img src="imgs/01(1).jpg" /></li>
<li><img src="imgs/02(2).jpg" /></li>
<li><img src="imgs/03(3).jpg" /></li>
<li><img src="imgs/04(4).jpg" /></li>
<li><img src="imgs/01(1).jpg" /></li>
</ul>
</div>
<script src="../DOM/commer.js"></script>
<script>
var current = 0;//只声明了一次
function f1() {
var ulObj = ver("screen").children[0];
current -= 10;
if (current < -1200) {
ulObj.style.left = 0 + "px";
current = 0;
} else {
ulObj.style.left = current + "px";
}
}
var timeId=setInterval(f1, 20);
ver("screen").onmouseover=function () {
//停止
clearInterval(timeId);
};
ver("screen").onmouseout=function () {
//继续
timeId=setInterval(f1, 20);
};
</script>
原文：https://www.cnblogs.com/lujieting/p/10055167.html