使用swiper实现的类似环绕式的轮播/给图片添加倒影

最新推荐文章于 2024-01-09 13:14:10 发布

qwerty843

最新推荐文章于 2024-01-09 13:14:10 发布

阅读量421

点赞数

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/weixin_60886119/article/details/132366985

版权

<!DOCTYPE html>
<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">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>InsCode</title>
    <style>
        .robot_swiper_all .swiper-slide-prev{
            transform:translate3d(12.3876px, 166px, -123.876px) rotateZ(-20deg) scale(0.8) !important;
            transition: transform 0.6s ease;
        }
        .robot_swiper_all .swiper-slide-next{
            transform:translate3d(-12.3808px, 166px, -123.808px) rotateZ(20deg) scale(0.8) !important;
            transition: transform 0.6s ease;
        }
        /*给图片添加倒影*/
        .home-drawing-robot-swiper .swiper-slide {
            -webkit-box-reflect: below 0px linear-gradient(transparent, transparent,#00000021);
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="swiper robot_swiper">
            <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img class="article-item__image" src="图片">
                    </div>
                    <div class="swiper-slide">
                        <img class="article-item__image" src="图片">
                    </div>
                    <div class="swiper-slide">
                        <img class="article-item__image" src="图片">
                    </div>
                    <div class="swiper-slide">
                        <img class="article-item__image" src="图片">
                    </div>
                    
            </div>
            <div class="robot_button_pagination">
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
    <script>
        var robotSwiper = new Swiper(".robot_swiper", {
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        loop: true,
        centeredSlides : true,
        observer: true,
        observeParents: true,
        slidesPerView: 2.4,
        spaceBetween : '10%',
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        // on: {
        //     slideChangeTransitionStart: function () {
        //         var activeIndex = this.activeIndex;
        //         var prevIndex = activeIndex === 0 ? this.slides.length - 1 : activeIndex - 1;
        //         var nextIndex = activeIndex === this.slides.length - 1 ? 0 : activeIndex + 1;

        //         var prevTranslateX = 6.1938; // 调整为更小的值，以实现更平滑的动画
        //         var prevRotateZ = -20; // 逆时针旋转的角度
        //         var prevScale = 0.8; // 保持原来的值或根据需要调整
                
        //         var nextTranslateX = -12.3808; // 计算下一个slide的X偏移量，保持原来的值或根据需要调整
        //         var nextRotateZ = 20; // 保持原来的值或根据需要调整
        //         var nextScale = 0.8; // 保持原来的值或根据需要调整

        //         // 为上一个和下一个slide应用transform样式
        //         this.slides[prevIndex].style.transition = 'transform 0.6s ease';
        //         this.slides[prevIndex].style.transform = `translate3d(${prevTranslateX}px, 166px, -123.876px) rotateZ(${prevRotateZ}deg) scale(${prevScale})`;

        //         this.slides[nextIndex].style.transition = 'transform 0.6s ease';
        //         this.slides[nextIndex].style.transform = `translate3d(${nextTranslateX}px, 166px, -123.808px) rotateZ(${nextRotateZ}deg) scale(${nextScale})`;

        //         // 为左侧的slide应用与swiper-slide-prev相同的transform
        //         for (var i = 0; i < prevIndex; i++) {
        //             this.slides[i].style.transition = 'transform 0.6s ease';
        //             this.slides[i].style.transform = `translate3d(${prevTranslateX}px, 166px, -123.876px) rotateZ(${prevRotateZ}deg) scale(${prevScale})`;
        //         }

        //         // 为右侧的slide应用与swiper-slide-next相同的transform
        //         for (var i = nextIndex + 1; i < this.slides.length; i++) {
        //             this.slides[i].style.transition = 'transform 0.6s ease';
        //             this.slides[i].style.transform = `translate3d(${nextTranslateX}px, 166px, -123.808px) rotateZ(${nextRotateZ}deg) scale(${nextScale})`;
        //         }

        //         // 清除当前活动slide的transform样式
        //         this.slides[activeIndex].style.transition = '';
        //         this.slides[activeIndex].style.transform = '';
        //     },
        // },
    });
    </script>
</body>
</html>