banner缓慢缩小过渡效果
<style>
/* pc_ban */
.pc_ban .swiper-slide {
overflow: hidden;
}
.pc_ban .sw_bg {
width: 100%;
height: 600px;
top: 0;
left: 0;
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transition: all 5s;
-o-transition: all 5s;
-ms-transition: all 5s;
-moz-transition: all 5s;
-webkit-transition: all 5s;
}
.pc_ban .swiper-slide-active .sw_bg {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
.pc_ban .swiper-button-prev,
.pc_ban .swiper-button-next {
color: #666666;
font-size: 26px;
opacity: 0;
transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
.pc_ban .swiper-button-prev {
left: 7%;
}
.pc_ban .swiper-button-next {
right: 7%;
}
.pc_ban:hover .swiper-button-prev {
left: 13%;
opacity: .8;
}
.pc_ban:hover .swiper-button-next {
right: 13%;
opacity: .8;
}
.pc_ban .swiper-pagination-bullet {
transition: all .6s;
}
.pc_ban .swiper-pagination-bullet-active {
margin: 0 4px;
width: 40px;
height: 8px;
border-radius: 30px;
background: #fff;
}
@media only screen and (max-width:1200px) {
.pc_ban .sw_bg {
height: 450px;
}
}
@media only screen and (max-width:992px) {
.pc_ban .sw_bg {
height: 300px;
}
}
@media only screen and (max-width:640px) {
.pc_ban .sw_bg {
height: 180px;
}
.pc_ban .swiper-pagination-bullet-active {
width: 8px;
}
.pc_ban .swiper-pagination {
bottom: 0;
}
}
/* pc_ban end */
</style>
<div class="swiper-container pc_ban">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="sw_bg" style="background:url(images/ban_02.jpg) no-repeat center / cover;"></div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev iconfont icon-right"></div>
<div class="swiper-button-next iconfont icon-zuo"></div>
</div>
<script type="text/javascript ">
var swiper = new Swiper('.pc_ban', {
on: {
init: function() {
swiperAnimateCache(this);
swiperAnimate(this);
},
slideChangeTransitionEnd: function() {
swiperAnimate(this);
}
},
// effect: 'fade', //渐变切换
centeredSlides: true,
paginationClickable: true,
slideToClickedSlide: true,
autoplayDisableOnInteraction: false,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
loop: true,
navigation: {
nextEl: '.pc_ban .swiper-button-next',
prevEl: '.pc_ban .swiper-button-prev',
},
pagination: {
el: '.pc_ban .swiper-pagination',
clickable: true,
},
});
//鼠标覆盖停止自动切换
swiper.el.onmouseover = function() {
swiper.autoplay.stop();
}
//鼠标离开开始自动切换
swiper.el.onmouseout = function() {
swiper.autoplay.start();
}
</script>
