效果如上,只能贴一个不会动的图了。。。实际效果非常棒,此版本兼顾了PC端和移动端。
1、上层添加蒙版图片
2、底层是swiper轮播图
3、每个轮播图在切换前由左向右移动
HTML代码:
<div id="banner" class="bannerBox">
<div class="swiper-container" style="z-index: 0;">
<div class="swiper-wrapper">
<div class="swiper-slide moveRight">
<div class="pc"><img src="../../../../../Public/Home/images/img_banner01.jpg" /></div>
<div class="sp"><img src="../../../../../Public/Home/images/img_banner01_sp.jpg" /></div>
</div>
<div class="swiper-slide">
<div class="pc"><img src="../../../../../Public/Home/images/img_banner02.jpg" /></div>
<div class="sp"><img src="../../../../../Public/Home/images/img_banner02_sp.jpg" /></div>
</div>
<div class="swiper-slide">
<div class="pc"><img src="../../../../../Public/Home/images/img_banner03.jpg" /></div>
<div class="sp"><img src="../../../../../Public/Home/images/img_banner03_sp.jpg" /></div>
</div>
</div>
</div>
<div class="bannerMask">
<div class="baMaskScCon">
<div class="banMaskImg">
<span>
<div class="pc"><img src="../../../../../Public/Home/images/img_banner_mask.png" alt=""></div>
<div class="sp"><img src="../../../../../Public/Home/images/img_banner_mask_sp.png" alt=""></div>
</span>
<div class="banner-text">
<div>
<p>精准健康解决方案</p>
<h2>改变疾病的预测预防和治疗方式</h2></div>
<div class="home-button"><a href="{$vo.out_url|get_nav_url}" >更多</a></div>
</div>
</div>
</div>
</div>
</div>
js代码:我是给每个图片都加了向右移动的动画,可根据需要添加其他动画,css里面有其他参考动画,此处参考http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=2234&extra= 动画效果
<!-- Swiper JS -->
<script src="__JS__/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
trList=['moveRight','moveRight','moveRight'];
var swiper = new Swiper('.swiper-container',{
speed:500,
autoplay:4400,
autoplayDisableOnInteraction:false,
effect:'fade',
pagination : '.swiper-pagination',
paginationClickable :true,
onSlideChangeStart: function(swiper){
nextSlide=swiper.slides.eq(swiper.activeIndex);
nextSlide.addClass(trList[Math.floor(Math.random()*3)]);
},
onSlideChangeEnd: function(swiper){
prevSlide=swiper.slides[swiper.previousIndex];
prevSlide.className="swiper-slide";
},
});
</script>
CSS代码:
@charset "utf-8";
.banMaskImg > span img
{
opacity: 1;
}
/*banner*/
.bannerBox {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.swiper-container .swiper-wrapper .pc {
display: block;
}
.swiper-container .swiper-wrapper .sp {
display: none;
}
.banMaskImg .pc{display: block;}
.banMaskImg .sp{display: none;}
.baMaskScCon {
position: relative;
z-index: 1;
}
.bannerMask {
position: absolute;
width: 100%;
left: 50%;
top: 0;
transform: translate(-50%,0);
}
.bannerList {
width: 100%;
height: 100%;
}
.bannerList img {
width: 100%;
display: block;
}
.banMaskImg img {
width: 100%;
height: 100%;
display: block;
}
.swiper-container .swiper-wrapper{
-webkit-transition-timing-function: linear; /*之前是ease-out*/
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
left: 50%;
transform: translateX(-50%);
}
@media all and (min-width: 0) and (max-width: 1023px) {
.bannerBox {height: auto;}
}
@media all and (min-width: 0) and (max-width: 767px) {
.banMaskImg > span img {
opacity: 1;
}
.bannerMask .swiper-container {
opacity: 0;
}
.swiper-container .swiper-wrapper {
left: auto;
transform: translateX(0);
}
.swiper-container .swiper-wrapper .pc {
display: none;
}
.swiper-container .swiper-wrapper .sp {
display: block;
}
.banMaskImg .pc{display: none;}
.banMaskImg .sp{display: block;}
.banMaskImg {
position: relative;
left: auto;
transform: translateX(0);
}
}
.leftUp img{-webkit-animation-name:leftUp;animation-name:leftUp;}
@-webkit-keyframes leftUp{
0%{transform:scale(1.1,1.1) translate(4.545%,4.545%); }
100%{transform:scale(1.1,1.1) translate(-4.545%,-4.545%);}}
@keyframes leftUp{
0%{transform:scale(1.1,1.1) translate(4.545%,4.545%);}
100%{transform:scale(1.1,1.1) translate(-4.545%,-4.545%);}}
.moveRight img{-webkit-animation-name:moveRight;animation-name:moveRight;}
@-webkit-keyframes moveRight{
0%{transform:scale(1.1,1.1) translate(-4.545%,0); }
100%{transform:scale(1.1,1.1) translate(4.545%,0);}}
@keyframes moveRight{
0%{transform:scale(1,1) translate(-4.545%,0);}
100%{transform:scale(1,1) translate(4.545%,0);}}
.moveDown img{-webkit-animation-name:moveDown;animation-name:moveDown;}
@-webkit-keyframes moveDown{
0%{transform:scale(1.1,1.1) translate(0,-4.545%); }
100%{transform:scale(1.1,1.1) translate(0,4.545%);}}
@keyframes moveDown{
0%{transform:scale(1.1,1.1) translate(0,-4.545%);}
100%{transform:scale(1.1,1.1) translate(0,4.545%);}}
.centerBig img{-webkit-animation-name:centerBig;animation-name:centerBig;}
@-webkit-keyframes centerBig{
100%{transform:scale(1.1,1.1);}}
@keyframes centerBig{
100%{transform:scale(1.1,1.1);}}
.rightDownBig img{-webkit-animation-name:rightDownBig;animation-name:rightDownBig;}
@-webkit-keyframes rightDownBig{
100%{transform:scale(1.1,1.1) translate(4%,4%);}}
@keyframes rightDownBig{
100%{transform:scale(1.1,1.1) translate(4%,4%);}}
.swiper-slide img{
animation-duration:5s;
animation-timing-function:linear;
animation-fill-mode: forwards;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-fill-mode: forwards;
}