javascript 轮播图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .swiper {
            width: 500px;
            height: 300px;
            overflow: hidden;
            white-space: nowrap;
            margin: 0 auto;
            position: relative;
        }

        .swiper::-webkit-scrollbar {
            width: 0;
        }


        img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }


        ul {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            list-style: none;
            background: transparent;
        }

        li {
            width: 15px;
            height: 15px;
            background-color: rgba(0, 0, 0, .6);
            margin-right: 15px;
            border-radius: 50%;
            cursor: pointer;
        }

        .active {
            background-color: rgba(255, 255, 255, 0.823);
        }
    </style>


</head>

<body>

    <div class="swiper">
        <img src="./imgs/1.png" class="pics">
        <img src="./imgs/2.png" class="pics">
        <img src="./imgs/3.png" class="pics">
        <img src="./imgs/4.png" class="pics">
        <img src="./imgs/5.png" class="pics">
        <img src="./imgs/6.png" class="pics">  // src 换成自己的本地图片
        <ul class="swiper_said"></ul>
    </div>

</body>

<script>

    let activeIndex = 0
    let activeArr = []  
    let interval = 3000 
    let timeId
    function $(tag) { return Array.from(document.getElementsByClassName(tag)) }

    $('pics').forEach((el, i) => {
        el.style.transform = `translateX(${el.offsetWidth * i - el.offsetWidth * activeIndex}px)`
        activeArr.push(el.offsetWidth * i)
        let li = document.createElement("li")
        li.dataset.index = i
        if (activeIndex == i) {
            li.classList.add("active")
        }
        $('swiper_said')[0].appendChild(li)
    })

    $("pics").forEach(el => {
        el.style.transition = "all 1s"
    })


    $('swiper_said')[0].addEventListener("click", (e) => {
        if (activeIndex != e.target.dataset.index && e.target.className != "swiper_said") {
            activeIndex = e.target.dataset.index
            clearInterval(timeId)
            timeFn()
            said()
        }
    })

    timeFn()

    function timeFn() {
        timeId = setInterval(() => {
            if (activeIndex == activeArr.length - 1) {
                activeIndex = 0
            } else {
                activeIndex++
            }
            said()
        }, interval)

    }


    function said() {
        Array.from($('swiper_said')[0].children).forEach(el => {
            el.classList.remove("active")
        })
        $('swiper_said')[0].children[activeIndex].classList.add("active")

        $("pics").forEach((el, i) => {
            el.style.transform = `translateX(${activeArr[i] - activeArr[activeIndex]}px)`
        })
    }


</script>

</html>
提供一张照片
猜你喜欢
