脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js css卡片轮播图

js+css实现卡片轮播图效果

 更新时间：2022年02月23日 09:37:49   作者：little_shallot  
这篇文章主要为大家详细介绍了js+css实现卡片轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 深入理解Javascript里的依赖注入

    深入理解Javascript里的依赖注入

    我喜欢引用这句话，“程序是对复杂性的管理”。计算机世界是一个巨大的抽象建筑群。我们简单的包装一些东西然后发布新工具，周而复始。现在思考下，你所使用的语言包括的一些内建的抽象函数或是低级操作符。这在JavaScript里是一样的
    2014-03-03
  • javascript下function声明一些小结

    javascript下function声明一些小结

    function声明一些东西,我们都知道function和var一样是预处理的在js里面,但是到底什么是函数声明呢,我们来看几个例子
    2007-12-12
  • bootstrap3使用bootstrap datetimepicker日期插件

    bootstrap3使用bootstrap datetimepicker日期插件

    这篇文章主要为大家详细介绍了bootstrap3中使用bootstrap datetimepicker日期插件的用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • js实现(全选)多选按钮的方法【附实例】

    js实现(全选)多选按钮的方法【附实例】

    下面小编就为大家带来一篇js实现(全选)多选按钮的方法【附实例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-03-03
  • Javascript和jQuery的深浅拷贝详解

    Javascript和jQuery的深浅拷贝详解

    这篇文章主要为大家详细介绍了Javascript和jQuery的深浅拷贝，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • JavaScript中发出HTTP请求最常用的方法

    JavaScript中发出HTTP请求最常用的方法

    JavaScript具有很好的模块和方法来发送可用于从服务器端资源发送或接收数据的HTTP请求。这篇文章主要介绍了JavaScript中发出HTTP请求最常用的方法,需要的朋友可以参考下
    2018-07-07
  • JavaScript实现鼠标滑过处生成气泡的方法

    JavaScript实现鼠标滑过处生成气泡的方法

    这篇文章主要介绍了JavaScript实现鼠标滑过处生成气泡的方法,涉及鼠标事件与页面样式的相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • 微信小程序授权获取用户详细信息openid的实例详解

    微信小程序授权获取用户详细信息openid的实例详解

    这篇文章主要介绍了微信小程序授权获取用户详细信息openid的实例详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
    2017-09-09
  • js实现随机点名系统(实例讲解)

    js实现随机点名系统(实例讲解)

    下面小编就为大家带来一篇js实现随机点名系统(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • location.hash保存页面状态的技巧

    location.hash保存页面状态的技巧

    hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。接下来通过本文给大家介绍location.hash保存页面状态的相关内容，感兴趣的朋友一起学习吧
    2016-04-04

最新评论