<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.l {
float: left;
}
.r {
float: right;
}
.c:after {
clear: both;
0;
padding: 0;
content: "";
display: block;
}
img {
float: left;
300px;
}
.picMove {
300px;
height: 200px;
overflow: scroll;
}
.img {
900px;
background: orange;
}
</style>
<script src="../jquery-1.7.2/jquery.js"></script>
</head>
<body>
<div class="picMove">
<div class="img c">
<a href=""> <img src="./pic/1.jpg"></a>
<a href=""> <img src="./pic/2.jpg"></a>
<a href=""> <img src="./pic/3.jpg"></a>
</div>
</div>
</div>
<div>
<input type="button" value="向左边移动<">
<input type="button" value="向右边移动>">
</div>
<script>
var picMove = document.querySelector(".picMove"),
img = document.querySelector(".img"),
imgArr = document.querySelectorAll(".img img"),
input = document.querySelectorAll("input"),
index = 0,
count = 0;
input[0].onclick = function () {
var stop = setInterval(function () {
if (index < imgArr.length-1) {//0,1执行两次
picMove.scrollLeft = count++;
console.log(index + "px");
if (count == 300 * (index + 1)) {
clearInterval(stop);
index++;
if (index == imgArr.length) index = 0;
}
} else {
clearInterval(stop);
}
}, 1)
}
input[1].onclick = function () {
var stop = setInterval(function () {
console.log(index);
if (index > 0) {//2,1执行两次
picMove.scrollLeft = count--;
if (count == 300 * (index - 1)) {
clearInterval(stop);
index--;
if (index == imgArr.length) index = 0;
}
} else {
clearInterval(stop);
}
}, 1)
}
</script>
</body>
</html>