面向百度编程cv 2023-07-21 10:07 采纳率: 33.3%
浏览 26
已结题

swiper 设置direction: 'vertical' 怎么计算是弧形

<!--
    Swiper 预祝北京2022年冬奥会和冬残奥会成功举办
    Swiper 为北京2022年冬奥会官网（https://www.beijing2022.cn/）提供轮播图技术支持
    本轮播图版权所有 swiper中文网（https://www.swiper.com.cn/）
-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>环形旋转木马视图切换</title>
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="carousel.css">
    <script src="swiper/swiper-bundle.min.js"></script>
</head>
<body>
    <div id="carousel">
        <div class="swiper swiper-3d">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/carousel01.png" />
                    <p>北京冬奥会迎来倒计时一个月</p>
                </div>
                <div class="swiper-slide"><img src="images/carousel02.png" />
                    <p>北京冬奥会迎来倒计时一个月</p>
                </div>
                <div class="swiper-slide"><img src="images/carousel03.png" />
                    <p>北京冬奥会迎来倒计时一个月</p>
                </div>
                <div class="swiper-slide"><img src="images/carousel04.png" />
                    <p>北京冬奥会迎来倒计时一个月</p>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <script>
        slideW = 300;//一张图300px, 每面四张角度22.5（PI/8），中心角度PI/16                 
        radius = slideW * 0.5 / Math.sin(Math.PI / 16);//半径。圆心并不是视点中心，视点在1200px
        carouselSwiper = new Swiper('#carousel .swiper', {
            direction: 'vertical',
            watchSlidesProgress: true,
            slidesPerView: 'auto',
            centeredSlides: false,
            loop: true,
            loopedSlides: 8,
            grabCursor: true,
            //    autoplay: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                //clickable :true,
            },
            on: {
                progress: function (swiper, progress) {

                    for (i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i);
                        var slideProgress = this.slides[i].progress;
                        translateX = (slideProgress + 1.5) * (slideW / 3 - Math.cos((slideProgress + 1.5) * 0.125 * Math.PI) * slideW * 1.1 / 3) + 'px';//调整图片间距，根据图片宽度改变数值实现自适应
                        rotateY = (slideProgress + 1.5) * 22.5;//图片角度
                        translateZ = (radius - Math.cos((slideProgress + 1.5) * 0.125 * Math.PI) * radius - 150) + 'px';//调整图片远近，刚好4个在画框内
                        slide.transform('translateX(' + translateX + ') translateZ(' + translateZ + ') rotateY(' + rotateY + 'deg)');

                    }
                },
                setTransition: function (swiper, transition) {
                    for (var i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i)
                        slide.transition(transition);
                    }
                }
            }

        })
    </script>
</body>

</html>
  • 写回答

2条回答 默认 最新

  • 开发技术控 2023-07-21 11:45
    关注

    引用gpt回答 有帮助的话 采纳一下
    Swiper 在垂直方向(direction:'vertical')时实现环形旋转的计算逻辑如下:

    1. 计算每张图片的角度间隔
      这里一共8张图片,每张图片的角度间隔为360度/8=45度
    2. 计算图片中心到视点的距离(z轴距离)
      设图片宽度为w,则图片中心到视点距离约为w/2×tan(角度/2)
    3. 计算图片的x轴偏移量
      x轴偏移量需要根据当前进度增加,使图片间距不均匀,形成弧形
    4. 设置transform属性
      将计算得到的角度rotateY、x轴偏移translateX、z轴偏移translateZ都设置到slide的transform属性上,实现3D效果。
      关键代码:
      js
    // 每张图片角度 
var angle = slideProgress * 45; 

// z轴偏移
var translateZ = (w/2) * Math.tan(angle/2);

// x轴偏移
var translateX = slideProgress * offset; 

// 设置transform属性
slide.transform(`
  translateX(${translateX}px)
  translateZ(${translateZ}px)
  rotateY(${angle}deg)
`);

    通过计算角度和坐标偏移,并应用3D变换,Swiper可以实现垂直方向的环形旋转效果

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 7月4日
  • 已采纳回答 6月26日
  • 创建了问题 7月21日

悬赏问题

  • ¥30 STM32 INMP441无法读取数据
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上，请大家贡献智慧
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面，不要作在线的，要离线状态。
  • ¥15 各位 帮我看看如何写代码，打出来的图形要和如下图呈现的一样，急
  • ¥30 c#打开word开启修订并实时显示批注
  • ¥15 如何解决ldsc的这条报错/index error
  • ¥15 VS2022+WDK驱动开发环境