swiper轮播图

normi-D18
已于 2023-10-09 10:33:52 修改
阅读量124
点赞数
分类专栏：前端文章标签：前端
于 2023-10-09 10:33:20 首次发布
本文链接：https://blog.csdn.net/weixin_47175934/article/details/133696244
版权
前端专栏收录该内容
3 篇文章 0 订阅
订阅专栏
本文介绍了如何使用Swiper库实现一个响应式轮播图，展示了三个银行业务案例，包括数据中台项目、5G智慧银行等，并包含CSS和JavaScript代码实现图片切换和导航控制。
摘要由CSDN通过智能技术生成
实现这样的轮播图
（练习，参考宇信科技）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
    <style>
        .banner {
            padding: 6.25vw 0;
            background-color: #fff;
            font-size: 0;
        }
        .banner .bot-block {
            margin-top: 3.125vw;
            position: relative;
        }
        .banner .bot-block .items {
            padding-left: 9.375vw;
            padding-right: calc(70.625vw + 24px);
        }
        .banner .bot-block .item {
            position: relative;
            overflow: hidden;
            width: 18.75vw;
            height: 31.25vw;
            transition: width .5s ease;
        }
        .banner .bot-block .item .img-box {
            width: 61.25vw;
            height: 100%;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -30.625vw;
            z-index: 1;
            opacity: .1;
            transition: opacity .3s ease;
        }
        .banner .bot-block .item .show {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 18.75vw;
            padding: 3.125vw;
            font-size: 24px;
            line-height: 1.5;
            color: #fff;
            z-index: 2;
            transition: all .3s ease;
        }
        .banner .bot-block .item .hide {
            width: 61.25vw;
            height: 100%;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -30.625vw;
            padding: 6.25vw;
            z-index: 2;
            opacity: 0;
            visibility: hidden;
            transition: all .3s ease;
        }
        .banner .bot-block .item img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease;
            }
            .banner .bot-block .item h3 {
            font-size: 24px;
            color: #fff;
        }
        .banner .bot-block .item h3:after {
            content: '';
            width: 60px;
            height: 4px;
            display: block;
            margin-top: 20px;
            background-image: linear-gradient(90deg, #5051f3, #c9449a);
        }
        .banner .bot-block .item p {
            font-size: 16px;
            line-height: 2;
            color: #ffffff;
            margin-top: 15px;
        }
        .banner .bot-block .item a {
            display: block;
            position: absolute;
            bottom: 6.25vw;
            left: 6.25vw;
            width: 120px;
            font-size: 14px;
            line-height: 40px;
            color: #5c3e3e;
            text-align: center;
            background-image: linear-gradient(90deg, #f7b42a, #f29803);
            transition: all .3s ease;
        }
        .banner .bot-block .item a:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(242, 152, 3, 0.3);
        }
        .banner .bot-block .item:hover img {
            transform: scale(1.1);
        }
        .banner .bot-block .item.swiper-slide-active {
            width: 61.25vw;
        }
        .banner .bot-block .item.swiper-slide-active .show {
            opacity: 0;
            visibility: hidden;
        }
        .banner .bot-block .item.swiper-slide-active .hide {
            opacity: 1;
            visibility: visible;
        }
        .banner .bot-block .item.swiper-slide-active .img-box, .banner .bot-block .item.swiper-slide-next .img-box {
            opacity: 1;
        }
        .banner .button {
            position: absolute;
            top: 50%;
            margin-top: -30px;
            width: 60px;
            height: 60px;
            background-position: center;
            background-repeat: no-repeat;
            background-color: transparent;
            background-image: url("https://www.yusys.com.cn/statics/home/images/index/prev-3.png");
            transition: all .3s ease;
            cursor: pointer;
            z-index: 2;
        }
        .banner .button:hover {
            background-color: #172573;
            background-image: url("https://www.yusys.com.cn/statics/home/images/index/prev-4.png");
        }
        .banner .button-prev {
            left: 0;
        }
        .banner .button-next {
            right: 0;
            transform: rotateY(180deg);
        }
        .banner .pagination {
            margin-top: 2vw;
            text-align: center;
        }
        .banner .pagination span {
            display: inline-block;
            vertical-align: top;
            width: 24px;
            height: 24px;
            margin: 0 10px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            background-image: url("https://www.yusys.com.cn/statics/home/images/index/icon-3-1.png");
            cursor: pointer;
        }
        .banner .pagination span.active {
            background-image: url("https://www.yusys.com.cn/statics/home/images/index/icon-3-2.png");
            animation: o-rotate 10s linear infinite;
        }
        .banner a.more {
            display: block;
            position: absolute;
            right: 0;
            top: 60px;
            width: 180px;
            font-size: 16px;
            line-height: 48px;
            color: #5c3e3e;
            text-align: center;
            background-image: linear-gradient(90deg, #f7b42a, #f29803);
            transition: all .3s ease;
        }
        .banner a.more:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(242, 152, 3, 0.3);
        }

    </style>
</head>
<body>
    <div class="banner">
        <div class="bot-block">
            <div class="items swiper-container">
                <div class="swiper-wrapper">
                    <div class="item swiper-slide">
                        <div class="img-box">
                            <img src="https://www.yusys.com.cn//uploads/images/2020/1222/bxRORO8vZjJjtbwEUcuG93qLtyNA5pdKoSTt1jLz.jpeg" alt="为某头部股份制银行打造数据中台项目">
                        </div>
                        <div class="show">为某头部股份制银行打造数据中台项目</div>
                        <div class="hide">
                            <h3 class="h3">为某头部股份制银行打造数据中台项目</h3>
                            <p>该联机开放平台项目是某股份制银行数据中心2020年重点战略项目，将以Open API 的方式对外提供数据服务，建立技术底座，实现对全行提供实时在线的数据产品服务，提升银行的数字化服务能力。</p>
                        </div>
                    </div>
                    <div class="item swiper-slide">
                        <div class="img-box">
                            <img src="https://www.yusys.com.cn//uploads/images/2020/1222/mKqQ1R4a1Pdjb02gHeRCcssFqV5z8Jdd7xGnuTRw.jpeg" alt="为某民营银行打造业内首个民营银行数据中台落地案例">
                        </div>
                        <div class="show">为某民营银行打造业内首个民营银行数据中台落地案例</div>
                        <div class="hide">
                            <h3 class="h3">为某民营银行打造业内首个民营银行数据中台落地案例</h3>
                            <p>项目将基于阿里大数据平台，并配合新核心项目群进行建设，通过建立一套可持续“让数据用起来”的数据服务体系，将数据资产快速形成服务能力并与业务对接，在业务中产生数据价值，实现数据的服务化和业务化，并发挥银行的数据价值。</p>
                        </div>
                    </div>
                    <div class="item swiper-slide">
                        <div class="img-box">
                            <img src="https://www.yusys.com.cn//uploads/images/2020/1222/Xk6Dn2kuJmxKzf09MiZb1R9pHN8fscgQMUkcgUtB.jpeg" alt="青岛银行5G+生态智慧银行项目荣获IDC场景创新大奖">
                        </div>
                        <div class="show">青岛银行5G+生态智慧银行项目荣获IDC场景创新大奖</div>
                        <div class="hide">
                            <h3 class="h3">青岛银行5G+生态智慧银行项目荣获IDC场景创新大奖</h3>
                            <p>宇信科技与青岛银行携手打造的山东省首家跨界新金融、新场景的综合金融新业态，具有很强的示范意义。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="button button-prev"></div>
            <div class="button button-next"></div>
        </div>
        <div class="pagination"></div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
    <script>
        var winWidth = $(window).width();
        var indexb = 0;
        for (var i = 0; i < $('.banner .item').length; i++) {
            $('.banner .pagination').append('<span></span>')
        }
        $('.banner .pagination span').eq(0).addClass('active')
        var indexSwiper5 = new Swiper($('.banner .items'), {
            speed: 500,
            simulateTouch: false,
            slidesPerView: 'auto',
            spaceBetween: 24,
            watchSlidesProgress: true,
            updateOnWindowResize: true,
            on: {
                init: function () {
                },
                resize: function () {
                    this.update()
                },
            }
        });
        $('.banner .button-prev').click(function(){
            indexb--;
            if(indexb < 0) indexb = 0
            indexs5Change(indexb)
        })
        $('.banner .button-next').click(function(){
            indexb++;
            if(indexb > $('.banner .item').length - 1) indexb = $('.banner .item').length - 1
            indexs5Change(indexb)
        })
        $('.banner .pagination span').click(function(){
            indexb = $(this).index();
            indexs5Change(indexb)
        })
        function indexs5Change(indexb){
            indexSwiper5.setTransition(500)
            indexSwiper5.setTranslate((-0.1875 * winWidth - 24) * indexb)
            $('.banner .item').eq(indexb).addClass('swiper-slide-active').siblings().removeClass('swiper-slide-active')
            $('.banner .pagination span').eq(indexb).addClass('active').siblings().removeClass('active')
        }
    </script>
</body>
</html>