Swiper使用效果loop=true 时，第1个页面在手机没效果，求解决！

Jiang · 发表于 2015-6-5 17:50:10

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="stylesheet" href="swiper/swiper.min.css">
<link rel="stylesheet" href="swiper/animate.min.css">

<link rel="stylesheet" href="css/css.css">
</head>
<body>

<div class="swiper-container">
<div class="swiper-wrapper">
      
      <div class="swiper-slide">
         <img src="images/1-1.png" class="ani s1-1" swiper-animate-effect="zoomInLeft" swiper-animate-duration="1s"
               swiper-animate-delay=".3s">
         <img src="images/1-2.png" class="ani s1-1" swiper-animate-effect="zoomInUp"
               swiper-animate-duration="1s" swiper-animate-delay="1.3s">
         <img src="images/1-3.png" class="ani s1-1" swiper-animate-effect="zoomInRight"
               swiper-animate-duration="1s" swiper-animate-delay="2.3s">
         <img src="images/1-4.png" class="ani s1-1" swiper-animate-effect="zoomInRight"
               swiper-animate-duration="1s" swiper-animate-delay="3.3s">
         <img src="images/1-5.png" class="ani s1-1 infinite" swiper-animate-effect="flipInX"
               swiper-animate-duration="1.5s"
               swiper-animate-delay="4.3s">
         <img src="images/1-6.png" class="ani s1-1" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s"
               swiper-animate-delay="5.3s">
      </div>
      
      <div class="swiper-slide">
         <img src="images/2-1.png" class="ani s1-1 infinite" swiper-animate-effect="rubberBand"
               swiper-animate-duration="1.5s"
               swiper-animate-delay=".3s">
         <img src="images/2-2.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
               swiper-animate-duration="1s" swiper-animate-delay="1.3s">
         <img src="images/2-3.png" class="ani s1-1" swiper-animate-effect="bounceInRight"
               swiper-animate-duration="1s" swiper-animate-delay="2.3s">
         <img src="images/2-4.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
               swiper-animate-duration="1s" swiper-animate-delay="3.3s">
         <img src="images/2-5.png" class="ani s1-1" swiper-animate-effect="bounceInRight"
               swiper-animate-duration="1s"
               swiper-animate-delay="4.3s">
         <img src="images/2-6.png" class="ani s1-1" swiper-animate-effect="flipInY" swiper-animate-duration="1s"
               swiper-animate-delay="5.3s">
      </div>
      
      <div class="swiper-slide">
         <img src="images/3-1.png" class="ani s1-1 infinite" swiper-animate-effect="bounce"
               swiper-animate-duration="1s"
               swiper-animate-delay=".3s">
         <img src="images/3-2.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
               swiper-animate-duration="1s" swiper-animate-delay="1.3s">
         <img src="images/3-3.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn"
               swiper-animate-duration="1s" swiper-animate-delay="2.3s">
         <img src="images/3-4.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
               swiper-animate-duration="1s" swiper-animate-delay="3.3s">
         <img src="images/3-5.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s"
               swiper-animate-delay="4.3s">
         <img src="images/3-6.png" class="ani s1-1" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
               swiper-animate-delay="5.3s">
      </div>
      
      <div class="swiper-slide">
         <img src="images/4-1.png" class="ani s1-1 infinite" swiper-animate-effect="rubberBand"
               swiper-animate-duration="1.5s"
               swiper-animate-delay=".3s">
         <img src="images/4-2.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
               swiper-animate-duration="1s" swiper-animate-delay="1.3s">
         <img src="images/4-3.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn"
               swiper-animate-duration="1s" swiper-animate-delay="2.3s">
         <img src="images/4-4.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
               swiper-animate-duration="1s" swiper-animate-delay="3.3s">
         <img src="images/4-5.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s"
               swiper-animate-delay="4.3s">
         <img src="images/4-6.png" class="ani s1-1" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s"
               swiper-animate-delay="5.3s">
         <img src="images/4-7.png" class="ani s1-1" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s"
               swiper-animate-delay="6.3s">
      </div>
      
      <div class="swiper-slide">
         <img src="images/5-1.png" class="ani s1-1 infinite" swiper-animate-effect="rubberBand"
               swiper-animate-duration="1.5s"
               swiper-animate-delay=".3s">
         <img src="images/5-2.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn"
               swiper-animate-duration="1s" swiper-animate-delay="1.3s">
         <img src="images/5-3.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
               swiper-animate-duration="1s" swiper-animate-delay="2.3s">
         <img src="images/5-4.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn"
               swiper-animate-duration="1s" swiper-animate-delay="3.3s">
         <img src="images/5-5.png" class="ani s1-1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s"
               swiper-animate-delay="4.3s">
         <img src="images/5-6.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s"
               swiper-animate-delay="5.3s">
         <img src="images/5-7.png" class="ani s1-1" swiper-animate-effect="flipInY" swiper-animate-duration="1s"
               swiper-animate-delay="6.3s">
      </div>
      
      <div class="swiper-slide">
         <img src="images/6-1.png" class="ani s1-1" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s"
               swiper-animate-delay=".3s">
         <img src="images/6-2.png" class="ani s1-1" swiper-animate-effect="zoomInRight"
               swiper-animate-duration="1s" swiper-animate-delay="1.3s">
         <img src="images/6-3.png" class="ani s1-1" swiper-animate-effect="zoomInLeft"
               swiper-animate-duration="1s" swiper-animate-delay="2.3s">
         <img src="images/6-4.png" class="ani s1-1" swiper-animate-effect="zoomInRight"
               swiper-animate-duration="1s" swiper-animate-delay="3.3s">
         <img src="images/6-5.png" class="ani s1-1" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s"
               swiper-animate-delay="4.3s">
      </div>

</div>
<img src="images/shou.png" class="shou" alt="">
</div>

</body>

<script type="text/javascript" src="swiper/swiper.animate1.0.2.min.js"></script>
<script type="text/javascript" src="swiper/swiper.jquery.min.js"></script>
<script type="text/javascript" src="swiper/swiper.min.js"></script>

<script type="text/javascript">

var swiper = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      loop: true,
      onInit: function (swiper) { //Swiper2.x的初始化是onFirstInit
         swiperAnimateCache(swiper);
         swiperAnimate(swiper);
      },
      onSlideChangeEnd: function (swiper) {
         swiperAnimate(swiper);
         var a = swiper.activeIndex+1;
         //alert(a)
         if (a >= swiper.slides.length) {
            $('.shou').hide();
         } else {
            $('.shou').show();
         }
      }
});
</script>
</html>