**基于vue模仿苹果官网的banner图**
I just received a new requirement recently and needed to make a carousel, so without further ado, I used the carousel that comes with element ui. It is simple and violent, and the requirement can be realized in minutes, and then I can fish again.
After five minutes, the effect is as shown in the figure:
this effect can be exquisite, but as a qualified front-end, this effect is absolutely not acceptable. So referring to the previous banner carousel image on Apple’s official website, I used swiper to rewrite a new version. The dynamic effect is shown in the figure: Picture effect
:
This effect looks better than the previous one.
Some core codes are as follows. It is still modified on the basis of the original swiper. Before using it, you need to npm install swiper. For cv engineers, these are trivial.
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