自定义滚动无限循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
position:absolute;
top:100px;
left:50%;
height:60px;
width:200px;
transform:translateX(-50%);
background-color:#dcdfe6;
overflow-x:auto;
}
.item {
position:absolute;
left:0px;
top:0px;
bottom:0px;
right:0px;
flex-shrink:0;
height:100%;
width:200px;
background-color:#f56c6c;
font-size:30px;
text-align:center;
transform:translateX(0px);
}
</style>
</head>
<body>
<button onclick="clickMe(true)">点我下一步</button>
<button onclick="clickMe(false)">点我上一步</button>
<div class="box ">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<script>
let d = 200
let index = 0
const box = document.getElementsByClassName('box')[0]
const items = document.getElementsByClassName('item')
let current = -1;
function clickMe(isNext = false) {
if (!isNext) {
index--
current--
if (current < 0) {
current = items.length - 1
}
} else {
index++
current++
if (current > items.length - 1) {
current = 0
}
}
for (let i = 0; i < items.length; i++) {
const item = items[i]
let translateX = i * d - ((index - 1) * d)
item.style.transform = `translateX(${translateX}px)`
item.style.transitionDuration = `0.4s`
}
if (index >= items.length + 1) index = 0
console.log('current', current, box,)
const firstEle = items[0]
const lastEle = items[items.length - 1]
if (index == 1) {
index++
//取出最后一个放到第一个
lastEle.style.transform = `translateX(-${d}px)`
box.insertBefore(lastEle, firstEle);
} else if (index == items.length) {
index--
//取出第一个放到最后一个
firstEle.style.transform = `translateX(${d}px)`
box.appendChild(firstEle);
}
}
clickMe(true)
</script>
</body>
</html>
