Swiper 自适应焦点图带文字的代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://www.shangdaosheji.com/template/pc/css/swiper.min.css">
<link rel="stylesheet" href="http://www.shangdaosheji.com/template/pc/css/animate.min.css">
<style type="text/css">
body, div {
margin: 0;
padding: 0
}
.swiper-container {
width: 100%;
height: 100vh
}
.swiper-slide {
width: 100%;
position: relative
}
.banner-txt {
display: inline-block;
z-index: 9;
color: #fff;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-moz-transform: translate(-50%, -50%); /* Firefox */
-webkit-transform: translate(-50%, -50%); /* Safari 和 Chrome */
-o-transform: translate(-50%, -50%); /* Opera */
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://www.shangzhiwang.com/_Img/Main/mvisual_10years_bg.jpg)">
<div class="banner-txt">
<div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第一张内容文字 </div>
</div>
</div>
<div class="swiper-slide" style="background-image:url(http://www.shangzhiwang.com/_Img/Main/mvisual_webdesign.jpg)">
<div class="banner-txt">
<div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第二张内容文字 </div>
</div>
</div>
<div class="swiper-slide" style="background-image:url(http://www.shangzhiwang.com/_Img/Main/mvisual_ec.jpg)">
<div class="banner-txt">
<div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"> 第三张内容文字 </div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<script src="http://www.shangdaosheji.com/template/pc/js/swiper.min.js"></script>
<script src="http://www.shangdaosheji.com/template/pc/js/animate.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
autoplay: {
delay:200000,
disableOnInteraction:false
},
speed: 1000,
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
},
observer:true,
observeParents:true,
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
this.emit('slideChangeTransitionEnd');//在初始化时触发一次slideChangeTransitionEnd事件
},
slideChangeStart: function() {
swiperAnimate(this); //每个slide切换前时也运行当前slide动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时运行当前slide动画
// this.slides.eq(this.activeIndex).find('.ani').removeClass('ani');//动画只展示一次
}
}
});
</script>
</body>
</html>发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
相关文章