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>

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

(0)

相关推荐

  • 原生js实现轮播图的示例代码

    很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea

  • js实现轮播图的完整代码

    今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->

  • js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • 原生javascript+CSS实现轮播图效果

    本文实例为大家分享了javascript+CSS实现轮播图效果的具体代码,供大家参考,具体内容如下 1.html <ul id="banner" ></ul> 2.css ul{ list-style:none; position: absolute; padding: 0; left: 0; right: 0; bottom: 0; top:0; margin:auto; width: 800px; height:200px; } 3.js //生成轮播图 e

  • JS+CSS实现3D切割轮播图

    本文实例为大家分享了JS+CSS实现3D切割轮播图的具体代码,供大家参考,具体内容如下 第一步:我们首先要通过CSS来完成一个基本布局,利用 transform-style: preserve-3d设置成3D. 下面是CSS部分的代码 * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } /* 轮播图 */ .homePage { width: 800px; height: 200px; mar

  • JS轮播图实现简单代码

    本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播

  • 使用html+js+css 实现页面轮播图效果(实例讲解)

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=

  • JS+css3实现幻灯片轮播图

    本文实例为大家分享了JS+css3实现幻灯片轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; -webkit-touch-callout: none; -webkit-user-select: none;

  • js实现点击左右按钮轮播图片效果实例

    本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un

  • JavaScript+css+HTML实现移动端轮播图(含源码)

    目录 1.移动轮播图 2.案例分析 3.关于anime.js 1.移动轮播图 移动端轮播图与PC段轮播图,在技术选择上是有区别的,因为移动端的浏览器版本非常好,对于H5和CSS3的支持非常完美,所以很多效果可以CSS3的方式实现,比如可以使用 Transorm 属性替代原来的动画函数 可以自动播放图片 手指可以拖动播放轮播图 添加指示器,但只起到指示作用,点击不能切换图片 不需要左右导航 因为移动端轮播图的宽度一般与屏幕一样宽,所以focus不设置宽度 移动端使用CSS3的方式进行图片切换,所以

随机推荐