基于vue模仿苹果官网的banner图

搞不动的前端

已于 2022-12-12 11:40:15 修改

阅读量1.1k

点赞数

分类专栏： banner 文章标签： vue.js 前端 javascript

于 2022-12-12 11:17:48 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43929450/article/details/128283376

版权

banner 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Swiper实现类似苹果官网的动态轮播图效果，包括代码细节及动态过渡处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                            **基于vue模仿苹果官网的banner图**

最近刚接了个新需求，需要做一个轮播图，于是二话不说，就使用element ui 自带的轮播图，简单又暴力，分分钟实现需求，然后又可以摸鱼了。
在这里插入图片描述
五分钟以后，效果如图：

这个效果要讲究也能讲究，但我们作为一名合格的前端，这种效果绝对是不行的。于是参考了之前苹果官网的banner 轮播图，使用swiper重新写了一版本，动态效果如图：
请添加图片描述
图片效果：

这个效果，看上去，比之前的要好点了。
一些核心的代码如下，还是在原生的swiper的基础上，进行改造，使用之前，需要npm install swiper ，这些对于cv 工程师来讲，小意思了。

b,
      (a = new Swiper('.apple-banner .swiper-container', {
        autoplay: 3e3,
        speed: 1e3,
        loop: !0,
        runCallbacksOnInit: !1,
        watchSlidesProgress: !0,
        pagination: '.apple-banner .swiper-pagination',
        paginationClickable: !0,
        paginationBulletRender: function (a, b, c) {
          return '<li class="' + c + '"><span><i></i></span></li>'
        },
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        onProgress: function (a) {
          var b, c, d, e, f, g
          for (b = 0; b < a.slides.length; b++) {
            for (
              c = a.slides.eq(b),
                d = c[0].progress,
                d > 0
                  ? ((e = 0.9 * d * a.width),
                    (scale = 1 - 0.1 * d),
                    d > 1 && (scale = 0.9),
                    (txtPositionX = 0),
                    (txtPositionY = 30 * d + 'px'))
                  : ((e = 0), (scale = 1), (txtPositionX = 1e3 * -d + 'px'), (txtPositionY = 0)),
                f = c.find('.txt'),
                g = 0;
              g < f.length;
              g++
            )
              f.eq(g).transform('translate3d(' + txtPositionX + ',' + txtPositionY + ',0)')
            c.transform('translate3d(' + e + 'px,0,0) scale(' + scale + ')')
          }
        },
        onSetTransition: function (a, b) {
          var c, d, e
          for (c = 0; c < a.slides.length; c++)
            for (slide = a.slides.eq(c), slide.transition(b), d = slide.find('.txt'), e = 0; e < d.length; e++) d.eq(e).transition(b)
        },
        onSlideChangeStart: function (a) {
          a.autoplaying &&
            (a.bullets.eq(a.realIndex - 1).addClass('replace'),
            a.bullets.eq(a.realIndex - 1).removeClass('current firsrCurrent'),
            a.bullets.eq(a.realIndex).addClass('current'),
            0 == a.realIndex && a.bullets.removeClass('replace'))
        },
        onAutoplayStop: function (a) {
          a.$('.autoplay').removeClass('autoplay')
        }
      }))
    for (b = 0; b < a.slides.length; b++) a.slides[b].style.zIndex = b
    setTimeout(c, 1)

最后，如需完整项目代码，请联系我，邮箱1015095073@qq.com