<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
display: inline-block;
}
.box {
width: 100px;
height: 100px;
margin: 0 auto;
overflow: hidden;
}
.box ul {
width: 700px;
height: 100px;
font-size: 0;
position: relative;
/*transition: all 1s ease;*/
}
.box li {
/*position: absolute;*/
font-size: 15px;
}
.box li:nth-of-type(1) {
width: 100px;
height: 100px;
background-color: green;
position: relative;
}
.box li:nth-of-type(2) {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
.box li:nth-of-type(3) {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
.box li:nth-of-type(4) {
width: 100px;
height: 100px;
background-color: pink;
position: relative;
}
.box li:nth-of-type(5) {
width: 100px;
height: 100px;
background-color: green;
position: relative;
}
.box li:nth-of-type(6) {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
.act {
margin: 0 auto;
width: 100px;
}
.act li {
cursor: pointer;
}
button {
display: block;
width: 50px;
margin: 0 auto;
}
</style>
<body>
<div class="box">
<ul>
<li>4</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>1</li>
</ul>
</div>
<ul class="act">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<button>NEXT</button>
<button>Pre</button>
</ul>
</body>
<script type="text/javascript">
var arrbu = document.getElementsByTagName("button");
var oUL = document.getElementsByClassName("box")[0].getElementsByTagName("ul")[0];
var arrli = oUL.getElementsByTagName("li")
var arrlii = document.getElementsByClassName("act")[0].getElementsByTagName("li");
for(i = 0; i < arrli.length; i++) {
oUL.style.left = -100 + "px";
}
var j = 1;
var kai = true;
arrbu[0].onclick = function() {
if(kai) {
kai = false;
j++;
oUL.style.left = -100 * j + "px";
oUL.style.transition = "2s ease"
setTimeout(function() {
kai = true;
if(oUL.style.left == "-500px") {
console.log(1)
j = 1;
oUL.style.transition = "";
oUL.style.left = -arrli[j].offsetWidth + "px";
}
}, 1000);
}
}
arrbu[1].onclick = function() {
if(kai) {
kai = false;
j--;
oUL.style.left = -100 * j + "px";
oUL.style.transition = "2s ease"
setTimeout(function() {
kai = true;
if(oUL.style.left == "0px") {
console.log(1)
j = 4;
oUL.style.transition = "";
oUL.style.left = -arrli[j].offsetWidth*j + "px";
}
}, 1000);
}
}
for(k = 0; k < arrlii.length; k++) {
oUL.style.transition = "1s ease"
arrlii[k].onclick = function(ev) {
var hj = ev.target.innerText;
oUL.style.left = -100 * hj + "px";
}
}
</script>
</html>
轮播 平滑移动
最新推荐文章于 2021-07-21 11:50:54 发布