在这篇文章中我们来了解一下“用JS+CSS实现卡片轮播的具体代码是什么”，一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

具体内容如下

实现点击的时候切换卡片，自动轮播，鼠标移入暂停，移出继续轮播,有动画事件
效果就是这样

下面是代码

<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>Document</title>
    <style>
        .box {
            width: 680px;
            padding: 50px;
            margin: auto;
            margin-top: 300px;
        }

        .swiper,
        #swiper {
            width: 830px;
            height: 200px;
            position: relative;
        }

        .swiper div {
            display: block;
            position: absolute;
            width: 500px;
            height: 200px;
            overflow: hidden;
            left: 165px;
            top: 0;
            transition: 0.5s;
            color: #fff;
            font-size: 50px;
            text-align: center;
            line-height: 200px;

        }

        .swiper div:nth-child(1) {
            background: #1ebe09;
        }

        .swiper div:nth-child(2) {
            background: #323a31;
        }

        .swiper div:nth-child(3) {
            background: #0985be;
        }

        .swiper div:nth-child(4) {
            background: #090cbe;
        }

        .swiper div:nth-child(5) {
            background: #be5109;
        }

        .swiper div:nth-child(6) {
            background: #be09af;
        }

        .swiper div:nth-child(7) {
            background: #be8e09;
        }

        .swiper div:nth-child(8) {
            background: #be0909;
        }

        .swiper div:nth-child(9) {
            background: #06162c;
        }

        .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);

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="swiper" id="swiper">
            <div class="swiper-time b">1</div>
            <div class="swiper-time a">2</div>
            <div class="swiper-time dd">3</div>
            <div class="swiper-time dd">4</div>
            <div class="swiper-time dd">5</div>
            <div class="swiper-time dd">6</div>
            <div class="swiper-time dd">7</div>
            <div class="swiper-time dd">8</div>
            <div class="swiper-time c">9</div>

        </div>
    </div>
    <script>
        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() {
            console.log(index)
            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'
            }
        }

    </script>
</body>

</html>

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用JS如何实现测网速功能，思路及方法是怎样的

  这篇文章主要介绍了如何用JavaScipt测网速，对测网速感兴趣的同学，可以参考下

• JS中的Map与WeakMap类型的用法是什么？

  这篇文章主要给大家分享JS中的Map与WeakMap类型的用法，文中示例代码介绍的非常详细，对大家学习Map与WeakMap类型的使用和创建等操作有一定的帮助，感兴趣的朋友可以参考，希望大家阅读完这篇文章能有所收获，下面我们一起来学习一下吧。

• JavaScript取消请求的几种方式是什么，怎样做

  这篇文章主要为大家介绍了JavaScript取消请求方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• vue全局引入scss的方法是什么，有何要点需要注意

  本文主要介绍了 vue全局引入scss,我们在写VUE的时候,会使用scss，也会做一些通用样式,方便使用,在写好的通用样式的时候,每次都要单文件导入,刚开始写的时候,感觉还好,后面工程量大了后,就显得麻烦,那么本文就全局导入scss样式,下面来看详细内容,需要的朋友可以参考一下

• vue.js watch总失效什么情况，如何解决

  这篇文章主要给大家介绍了关于vue.js watch经常失效的场景与解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧