<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 2895px;
border: 3px solid orange;
}
li {
float: left;
margin: 10px;
}
div {
width: 970px;
height: 308px;
border: 1px solid red;
white-space: nowrap;
overflow: hidden;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="d1">
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/6.jpg"/></li>
</ul>
</div>
<div id="d2">
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/6.jpg"/></li>
</ul>
</div>
<script>
//向左转动图片
var d1 = document.getElementById("d1");
var u1 = d1.getElementsByTagName("ul")[0];
u1.innerHTML += u1.innerHTML;
function f1() {
var again = (1 / 2) * d1.scrollWidth;
if (d1.scrollLeft >= d1.scrollWidth / 2) {
d1.scrollLeft = 0;
}
d1.scrollLeft++;
}
setInterval(f1, 30);
//向右转动图片
var d2 = document.getElementById("d2");
var u2 = d2.getElementsByTagName("ul")[0];
u2.innerHTML += u2.innerHTML;
d2.scrollLeft = d2.scrollWidth;
function f2() {
d2.scrollLeft--;
if (d2.scrollLeft <= d2.scrollWidth / 2) {
d2.scrollLeft = d2.scrollWidth;
}
}
setInterval(f2, 30);
</script>
</body>
</html>
结果如下: