面向百度编程cv 2023-07-21 10:07 采纳率: 14.3%
浏览 25

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可以实现垂直方向的环形旋转效果

    评论

报告相同问题？

问题事件

  • 创建了问题 7月21日

悬赏问题

  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改
  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题：需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法