Swiper 自适应焦点图带文字代码

2022-10-19 浏览:162
Swiper 自适应焦点图带文字代码
评论:(0)复制地址

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>


评论:(0)复制地址
发布:苗景云 | 分类:IT技术&设计 | Tags:

相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。