1. 程式人生 > >swiper隱藏後再顯示不會觸發自動播放,加loop導致播放不正常

swiper隱藏後再顯示不會觸發自動播放,加loop導致播放不正常

程式碼:點選huanj這個ul再顯示swiper-container,預設swiper-container是隱藏的

..................................css...............................

.container{
    width:96%;
    margin:2% auto;
    position: relative;
display:none;

}

...................................頁面.........................

  <ul class="huanj">

    <li><img src="/images/xueda/hj1.jpg"></li>
    <li><img src="/images/xueda/hj3.jpg"></li>
    <li><img src="/images/xueda/hj4.jpg"></li>
    <li><img src="/images/xueda/hj5.jpg"></li>
    <li><img src="/images/xueda/hj6.jpg"></li> 
  </ul>
<div class="container re1">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="/images/xueda/hj1.jpg"></div>
      <div class="swiper-slide"><img src="/images/xueda/hj3.jpg"></div>
      <div class="swiper-slide"><img src="/images/xueda/hj4.jpg"></div>
      <div class="swiper-slide"><img src="/images/xueda/hj5.jpg"></div>
      <div class="swiper-slide"><img src="/images/xueda/hj6.jpg"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

</div>

<script src="/js/swiper3.07.jquery.min.js" type="text/javascript"></script> 
    <script>
swiper1 = new Swiper('.swiper-container', {
    observer:true,//修改swiper自己或子元素時,自動初始化swiper
    observeParents:true//修改swiper的父元素時,自動初始化swiper
});


    </script>

.....................................................js...................................

 $(".huanj").click(function(){

 $(".container").show();
 $(".huanj").hide();
 var mySwiper = new Swiper('.swiper-container', {  


        autoplay: 2500,
        autoplayDisableOnInteraction: false,
        pagination: '.swiper-pagination',
        paginationClickable: true,
       onSlideChangeEnd: function(swiper){ 
            swiper.update(); //swiper更新
        }
    });

................................效果..................

http://xdjy.soujoin.com/xa/xueda/