<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.big {
width: 200px;
height: 200px;
margin: 100px auto;
}
ul {
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
li {
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
.color1 {
background: red url('https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=88921570,1978236051&fm=26&gp=0.jpg') no-repeat top left/100% 100%;
}
.color2 {
background: yellow url('https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=83957109,3897176996&fm=26&gp=0.jpg') no-repeat top left/100% 100%;
}
.color3 {
background: pink url('https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2233981312,3019727382&fm=26&gp=0.jpg') no-repeat top left/100% 100%;
}
.color4 {
background: green url('https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3032040546,1208169455&fm=26&gp=0.jpg') no-repeat top left/100% 100%;
}
.input1 {
width: 30px;
height: 30px;
margin: 10px;
position: absolute;
top: 150px;
left: 550px;
}
.input2 {
width: 30px;
height: 30px;
margin: 10px;
position: absolute;
top: 150px;
left: 590px;
}
</style>
</head>
<body>
<div class="big">
<ul>
<li class="color1" style="top:0;">1</li>
<li class="color2" style="top:100px;">2</li>
<li class="color3" style="top:200px;">3</li>
<li class="color4" style=" top:-100px;">4</li>
</ul>
<input class="input1" type="button" value="上翻">
<input class="input2" type="button" value="下翻">
</div>
<script>
window.onload = function () {
var oIpt1 = document.getElementsByTagName("input")[0];
var oIpt2 = document.getElementsByTagName("input")[1];
var allColor = document.getElementsByTagName("li");
oIpt2.addEventListener("click", function () {
for (var i = 0; i < allColor.length; i++) {
allColor[i].style.top = parseFloat(allColor[i].style.top) - 100 + "px";
allColor[i].style.transition = .1 + "s"
if (allColor[i].style.top == -300 + "px") {
allColor[i].style.top = 100 + "px"
allColor[i].style.transition = 0 + "s"
}
}
}, false)
oIpt1.addEventListener("click", function () {
for (var i = 0; i < allColor.length; i++) {
allColor[i].style.top = parseFloat(allColor[i].style.top) + 100 + "px";
allColor[i].style.transition = .1 + "s"
if (allColor[i].style.top == 400 + "px") {
allColor[i].style.top = 0 + "px"
allColor[i].style.transition = 0 + "s"
}
}
}, false)
}
</script>
</body>
</html>