元宵节之——swiper

1.导包

2.css内容

<style>
*{
	margin:0;
	padding:0;
}
html,body{
	height:100%;
}
body{
	font-family:"microsoft yahei";
}
.swiper-container {
  /*  width: 320px;
    height: 480px;*/
	width: 100%;
    height: 100%;
	background:#fff;
}  
.swiper-slide{
}
.swiper-slide{
	width:100%;
	height:100%;
	background:url(upload/bg.jpg) no-repeat left top;
	background-size:100% 100%;
}
img{
	display:block;
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background: #fff;
opacity: .4;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
@-webkit-keyframes tipmove{0%{bottom:10px;opacity:0}50%{bottom:15px;opacity:1}100%{bottom:20px;opacity:0}}
.ani{
	position:absolute;
	}
.txt{
	position:absolute;
}
#array{
	position:absolute;z-index:999;-webkit-animation: tipmove 1.5s infinite ease-in-out;
}
</style>

3.内容

模块一

    <img src="upload/s1-t2.png" class="ani resize" style="width:100px;height:110px;left:70px;top:185px;z-index:3;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s"  > 
    <img src="upload/s1-t1.png" class="ani resize" style="width:60px;height:110px;left:220px;top:185px;z-index:3;" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  > 
    <img src="upload/flower.png" class="ani resize" style="width:180px;height:220px;left:0;top:0;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s"   > 
    <img src="upload/s1.png"  class="ani resize" style="width:320px;height:200px;left:0px;top:140px;z-index:1;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"  >
    
    </section>

模块二

 <section class="swiper-slide">
        <img src="upload/s2-i5.png" class="ani resize" style="width:263px;height:177px;left:31px;top:262px;z-index:5; border-radius:20px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s"  > 
      <img src="upload/s2-i4.png" class="ani resize" style="width:195px;height:163px;left:31px;top:48px;z-index:4;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s"  > 
        <img src="upload/s2-i3.png" class="ani resize" style="width:212px;height:186px;left:24px;top:36px;z-index:3;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  > 
        <img src="upload/s2-i2.png" class="ani resize" style="width:64px;height:221px;left:237px;top:20px;z-index:2;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"   > 
        <img src="upload/s2-i1.png"  class="ani resize" style="width:42px;height:192px;left:248px;top:27px;z-index:1;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s"  >
        
        </section>

模块三

    <img src="upload/s3-i5.png" class="ani resize" style="width:263px;height:177px;left:31px;top:262px;z-index:5; border-radius:20px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s"  > 
  <img src="upload/s3-i4.png" class="ani resize" style="width:195px;height:163px;left:31px;top:48px;z-index:4;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s"  > 
    <img src="upload/s2-i3.png" class="ani resize" style="width:212px;height:186px;left:24px;top:36px;z-index:3;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  > 
    <img src="upload/s3-i2.png" class="ani resize" style="width:64px;height:221px;left:237px;top:20px;z-index:2;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"   > 
    <img src="upload/s2-i1.png"  class="ani resize" style="width:42px;height:192px;left:248px;top:27px;z-index:1;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s"  >
    
    </section>

模块四

    <div class="ani resize" style="width:120px;height:110px;left:110px;top:184px;z-index:3;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
    <div class="txt">
    <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">愿您羊年运旺福旺</p>
    <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">条条祝福给您送上</p>
    <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">美丽花灯传递吉祥</p>
    <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">圆圆汤圆味道芬芳</p></div>
    
    </div>
    <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 
    <div class="txt">
    元<br>宵<br>节</div>
    </div>
    <img src="upload/flower.png" class="ani resize" style="width:180px;height:220px;left:0;top:0;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s"   > 
    <img src="upload/s1.png"  class="ani resize" style="width:320px;height:200px;left:0px;top:140px;z-index:1;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"  >
    
    </section>

结尾

 </div>
    
   <img src="images/web-swipe-tip.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize"> 
  <div class="swiper-pagination"></div>  
</div>

<script>  

scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');
          for (var j=0; j<resizes.length; j++) {
           resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
		   resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
		   resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
		   resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; 
	
          }
var scales = document.querySelectorAll('.txt');
for (var i=0; i<scales.length; i++) {
	ss=scales[i].style;
	ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform =ss.transform='translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px) translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)scaleX('+scaleW+') scaleY('+scaleH+') ';
}

		  
  var mySwiper = new Swiper ('.swiper-container', {
    direction : 'vertical',
    pagination: {
	   el:'.swiper-pagination',
    },
    mousewheel: true,
    on:{
	  init: function(){
        swiperAnimateCache(this);
        swiperAnimate(this);
 	  },
      slideChangeTransitionEnd: function(){
  	    swiperAnimate(this);
      }
    }
  })         
  </script>

效果图