达成移动效果有两种方式 推荐学习第一种 如果看不懂的话可以把 .box 的 overflow: hidden; 去掉再看效果 就比较好理解
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
position: relative;
}
.box {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
overflow: hidden;
}
.box ul {
position: absolute;
left: -200px;
display: flex;
}
.box li {
width: 200px;
height: 200px;
}
.but {
width: 200px;
position: absolute;
left: 50%;
top: 200px;
}
button {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li style="background: red;">4</li>
<li style="background:pink;">1</li>
<li style="background: blue;">2</li>
<li style="background: black;">3</li>
<li style="background: red;">4</li>
<li style="background: pink;">1</li>
</ul>
</div>
<div class="but">
<button><</button>
<button>></button>
</div>
<script type="text/javascript">
var but = document.getElementsByTagName("button")
var oul = document.getElementsByTagName('ul')[0]
var li = document.getElementsByTagName("li")[0]
var win = li.offsetWidth
console.log(li.offsetWidth)
var a = 0
var k = true
but[1].addEventListener("click", function() {
if (k) {
k = false
a++
oul.style.left = -(a + 1) * win + "px"
oul.style.transition = "1s ease"
console.log(oul.style.left)
setTimeout(function() {
k = true
if (oul.style.left == "-1000px") {
a = 0
oul.style.left = -1 * win + "px"
oul.style.transition = ""
}
}, 1200);
}
setTimeout(k, 1000)
})
but[0].addEventListener("click", function() {
console.log(k)
if (k) {
k = false
a--
// console.log(a)
oul.style.left = -(a + 1) * win + "px"
oul.style.transition = "1s ease"
setTimeout(function() {
k = true
if (oul.style.left == "0px") {
a = 3
oul.style.left = -4 * (win) + "px"
oul.style.transition = "none"
}
alert
}, 1200);
}
setTimeout(k, 1000)
})
</script>
</body>
</html>
简单理解的话 就是加5个图片 超出DIV的地方隐藏 然后改变UL的位置 形成一个横向切换的效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
position: relative;
}
.box {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
overflow: hidden;
}
.box ul {
position: absolute;
left: -200px;
display: flex;
}
.box li {
width: 200px;
height: 200px;
}
.but {
width: 200px;
position: absolute;
left: 50%;
top: 200px;
}
button {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li style="background: red;">4</li>
<li style="background:pink;">1</li>
<li style="background: blue;">2</li>
<li style="background: black;">3</li>
<li style="background: red;">4</li>
<li style="background: pink;">1</li>
</ul>
</div>
<div class="but">
<button><</button>
<button>></button>
</div>
<script type="text/javascript">
var but = document.getElementsByTagName("button")
var oul = document.getElementsByTagName('ul')[0]
var li = document.getElementsByTagName("li")[0]
var win = li.offsetWidth
console.log(li.offsetWidth)
var a = 0
var k = true
but[1].addEventListener("click", function() {
if (k) {
k = false
a++
oul.style.left = -(a + 1) * win + "px"
oul.style.transition = "1s ease"
console.log(oul.style.left)
setTimeout(function() {
k = true
if (oul.style.left == "-1000px") {
a = 0
oul.style.left = -1 * win + "px"
oul.style.transition = ""
}
}, 1200);
}
setTimeout(k, 1000)
})
but[0].addEventListener("click", function() {
console.log(k)
if (k) {
k = false
a--
// console.log(a)
oul.style.left = -(a + 1) * win + "px"
oul.style.transition = "1s ease"
setTimeout(function() {
k = true
if (oul.style.left == "0px") {
a = 3
oul.style.left = -4 * (win) + "px"
oul.style.transition = "none"
}
alert
}, 1200);
}
setTimeout(k, 1000)
})
</script>
</body>
</html>
这是第二种方法 简易理解就是让每个已经切换的图片跳到ul的末尾
但是他的索引值会改变不是很好找
推荐第一个方法 简单易懂