JS轮播图

1:html的代码

<div id="slideshow">
    <div class="swiper" id="swiper">
        <div class="swiper-time b"></div>
        <div class="swiper-time a"></div>
        <div class="swiper-time dd"></div>
        <div class="swiper-time dd"></div>
        <div class="swiper-time dd"></div>
        <div class="swiper-time dd"></div>
        <div class="swiper-time dd"></div>
        <div class="swiper-time dd"></div>
        <div class="swiper-time c"></div>
    </div>
</div>

 2:然后是css

#slideshow{
            width: 620px;
            height: 300px;
            float: left;
            margin-top: 20px;
            overflow: hidden;
            background-color: rgb(252, 252, 252);
        }
        .swiper, #swiper {
            width: 620px;
            height: 300px;
            position: relative;
        }
        .swiper div {
            display: block;
            position: absolute;
            width: 295px;
            height: 170px;
            overflow: hidden;
            left: 164px;
            top: 0;
            transition: 0.5s;
            color: #fff;
            font-size: 50px;
            text-align: center;
            line-height: 200px;
        }
        .swiper div:nth-child(1) {
            background-image: url("../image/w_1.jpeg");
            background-size: cover;
        }
        .swiper div:nth-child(2) {
            background-image: url("../image/w_2.jpeg");
            background-size: cover;
        }
        .swiper div:nth-child(3) {
            background-image: url("../image/w_3.jpeg");
            background-size: cover;
        }
        .swiper div:nth-child(4) {
            background-image: url("../image/w_4.jpeg");
            background-size: cover;
        }
        .swiper div:nth-child(5) {
            background-image: url("../image/w_5.jpeg");
            background-size: cover;
        }
        .swiper div:nth-child(6) {
            background-image: url("../image/w_6.jpeg");
            background-size: cover;
        }
        .swiper div:nth-child(7) {
            background-image: url("../image/w_7.jpeg");
            background-size: cover;
        }
        .swiper div:nth-child(8) {
            background-image: url("../image/w_8.jpeg");
            background-size: cover;
        }
        .swiper div:nth-child(9) {
            background-image: url("../image/w_9.jpeg");
            background-size: cover;
        }
        .swiper .a {
            opacity: 1;
            z-index: 23;
            -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
            -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
            transform: perspective(500px) translateX(300px) translateZ(-253px) rotateY(-45deg);
            -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
        }
        .swiper .b {
            opacity: 1;
            z-index: 33;
            -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
            transform: translateX(0) translateZ(-100px) rotateY(0deg)
        }
        .swiper .c {
            opacity: 1;
            z-index: 23;
            -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));
            -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
            -ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
            transform: perspective(500px) translateX(-300px) translateZ(-253px) rotateY(45deg);
        }
        .swiper .dd {
            opacity: 0;
            z-index: -1;
            -webkit-transform: translateX(0) translateZ(-300px) rotateY(0);
            -ms-transform: translateX(0) translateZ(-300px) rotateY(0);
            transform: perspective(500px) translateX(0) translateZ(-253px) rotateY(0);
        }

3:最后就是js的代码了

function slideshow() {
        const time = 3000;  //自动播放速度
        var index = 0  // 索引
        const swiperitem = document.getElementById('swiper') //获取父元素
        const swiper = swiperitem.getElementsByTagName('div') //获取合集
        //    自动轮播
        var setTime = setInterval(() => {
            if (index < swiper.length - 1) {
                index++
            } else {
                index = 0
            }
            style()
        }, time)
        // 点解切换
        for (let i = 0; i < swiper.length; i++) {
            swiper[i].onclick = function () {
                if (i === index) return
                index = i
                style()
            }
        }
        // 鼠标移入暂停
        swiperitem.onmouseover = function () {
            clearInterval(setTime)
        }
        // 鼠标移出继续轮播
        swiperitem.onmouseout = function () {
            setTime = setInterval(() => {
                if (index < swiper.length - 1) {
                    index++
                } else {
                    index = 0
                }
                style()
            }, time)
        }

        // 滚动事件
        function style() {
            for (let i = 0; i < swiper.length; i++) {
                swiper[i].className = 'swiper-time dd'
            }
            if (index === swiper.length - 1) {
                swiper[index].className = 'swiper-time b'
                swiper[0].className = 'swiper-time a'
                swiper[index - 1].className = 'swiper-time c'
            } else if (index === 0) {
                swiper[index].className = 'swiper-time b'
                swiper[index + 1].className = 'swiper-time a'
                swiper[swiper.length - 1].className = 'swiper-time c'
            } else {
                swiper[index].className = 'swiper-time b'
                swiper[index + 1].className = 'swiper-time a'
                swiper[index - 1].className = 'swiper-time c'
            }
        }
    }