console 命令行工具 X clear

console

let animationing = false
const container = document.querySelector(".scroll_box")
const imgList = [
    "https://picsum.photos/id/1015/1000/600",
    "https://picsum.photos/id/1018/1000/600",
    "https://picsum.photos/id/1019/1000/600",
    "https://picsum.photos/id/1020/1000/600",
]
let currentIndex = 0
const getPreIndex = () => {
    if (currentIndex === 0) {
        return imgList.length - 1
    }
    return currentIndex - 1
}
const getNextIndex = () => {
    if (currentIndex === imgList.length - 1) {
        return 0
    }
    return currentIndex + 1
}
const creatElemment = (index, className) => {
    let el = container.querySelector(className)
    if (!el) {
        el = document.createElement("section")
        el.classList.add(className)
    }
    el.style.backgroundImage = `url(${imgList[index]})`
    return el
}
const update = () => {
    container.appendChild(creatElemment(currentIndex, ".cur"))
    container.appendChild(creatElemment(getPreIndex(), ".prev"))
    container.appendChild(creatElemment(getNextIndex(), ".next"))
    container.appendChild(creatElemment(getPreIndex(), ".prev_"))
    container.appendChild(creatElemment(getNextIndex(), ".next_"))

}
update()
let touch = {x: 0, y: 0}
window.addEventListener("touchstart", event => {
    touch.x = event.touches[0].clientX
    touch.y = event.touches[0].clientY
})
window.addEventListener("touchend", event => {
    touch.x = 0
    touch.y = 0
})

window.addEventListener("touchmove", event => {
    if (animationing || touch.y == 0) return
    animationing = true
    if (Math.abs(touch.x - event.touches[0].clientX) > Math.abs(touch.y - event.touches[0].clientY)) {
        if (touch.x - event.touches[0].clientX > 0) {
            container.classList.add("left")
            currentIndex = getNextIndex()
        } else {
            container.classList.add("right")
            currentIndex = getPreIndex()
        }
    } else {
        if (touch.y - event.touches[0].clientY > 0) {
            container.classList.add("down")
            currentIndex = getNextIndex()
        } else {
            currentIndex = getPreIndex()
            container.classList.add("up")
        }
    }
    touch.x = event.touches[0].clientX
    touch.y = event.touches[0].clientY
})

window.addEventListener("mousedown", event => {
    touch.x = event.clientX
    touch.y = event.clientY
})
window.addEventListener("mouseup", event => {
    touch.x = 0
    touch.y = 0
})
window.addEventListener("mousemove", event => {
    if (animationing || touch.y == 0) return
    if (Math.abs(touch.x - event.clientX) < 250 && Math.abs(touch.y - event.clientY) < 250) return
    animationing = true
    if (Math.abs(touch.x - event.clientX) > Math.abs(touch.y - event.clientY)) {
        if (touch.x - event.clientX > 0) {
            container.classList.add("left")
            currentIndex = getNextIndex()
        } else {
            container.classList.add("right")
            currentIndex = getPreIndex()
        }                
    } else {
        if (touch.y - event.clientY > 0) {
            container.classList.add("down")
            currentIndex = getNextIndex()
        } else {
            currentIndex = getPreIndex()
            container.classList.add("up")
        }
    }
    touch.x = event.clientX
    touch.y = event.clientY
})
window.addEventListener("wheel", event => {
    if (animationing) return
    animationing = true
    if (event.deltaY > 0) {
        container.classList.add("down")
        currentIndex = getNextIndex()
    } else {
        currentIndex = getPreIndex()
        container.classList.add("up")
    }
})
container.addEventListener("transitionend", event => {
    container.classList.remove("up")
    container.classList.remove("down")
    container.classList.remove("left")
    container.classList.remove("right")
    animationing = false
    update()
})

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片滑动</title>
</head>

<body>
    <div class="scroll_box">
        <section class="cur"></section>
        <section class="prev"></section>
        <section class="next"></section>
        <section class="prev_"></section>
        <section class="next_"></section>
    </div>
</body>

</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.scroll_box {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.scroll_box .cur {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("images/GirlFriend01.jpg") center no-repeat;
    background-size: cover;
}
.scroll_box .prev,
.scroll_box .next,
.scroll_box .prev_,
.scroll_box .next_ {
    overflow: hidden;
    position: absolute;

}
.scroll_box .prev {
    top: 0;
    width: 100%;
    height: 0;
    background: url("images/GirlFriend02.jpg") center no-repeat;
    background-size: cover;
}
.scroll_box .next {
    bottom: 0;
    width: 100%;
    height: 0;
    background: url("images/GirlFriend03.jpg") center no-repeat;
    background-size: cover;
}
.scroll_box .prev_ {
    left: 0;
    width: 0%;
    height: 100%;
    background: url("images/GirlFriend02.jpg") center no-repeat;
    background-size: cover;
}
.scroll_box .next_ {
    right: 0;
    width: 0%;
    height: 100%;
    background: url("images/GirlFriend03.jpg") center no-repeat;
    background-size: cover;
}
.scroll_box.up .prev,
.scroll_box.down .next{
    height: 100%;
}
        
.scroll_box.right .prev_,
.scroll_box.left .next_{
    width: 100%;
}
.scroll_box.up .cur {
    transform: translateY(100%);
}
.scroll_box.left .cur {
    transform: translateX(-100%);
}
.scroll_box.right .cur {
    transform: translateX(100%);
}
.scroll_box.down .cur {
    transform: translateY(-100%);
}

.scroll_box > section {
    transition: width 1s, height 1s, transform 1s .1s;
}