關於移動端使用swiper做圖片文字輪播的思考


最近做移動端網頁的時候,需要在首頁添加一個公告的模塊,用來輪播公告消息標題並且能鏈接到相應的詳情頁面,最開始用的是swiper插件,在安卓上測試完全沒有問題,但是在蘋果機上就沒有那么靈敏了,來回切換首頁和詳情頁的時候就會出現輪播的卡頓,甚至停播的現象,反復測試的時候問題更甚,搜了很多資料沒有查到相關的解決方法,據說可能跟系統緩存相關,但是也沒有具體的說法,考慮到此處的輪播不用手動滑動,只需實現自動輪播和跳轉的功能,現在換成了用純jQuery實現效果:

  <div class="banner">
      <ul>//輪播內容
          <li><a href="#"><img src="images/1.png" alt=""></a></li>
          <li><a href="#"><img src="images/2.png" alt=""></a></li>
          <li><a href="#"><img src="images/3.png" alt=""></a></li>
          <li><a href="#"><img src="images/4.png" alt=""></a></li>
          <li><a href="#"><img src="images/5.png" alt=""></a></li>
      </ul>
      <ol>//角標
          <li class="current"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
      </ol>
   </div>

相應的html布局根據需要設置成自己的樣式

$(function(){    
    ;(function(){
         var timer=null;
         var num=0;
         var zin=100;
         function autoplay(){    
            clearInterval(timer);
            timer=setInterval(function(){    
                num++;
                zin++;
                if(num>4){num=0;}
                $('.banner_in ul li').hide().eq(num).fadeIn();
                $('.banner_in ul li').eq(num).css('z-index',zin);
                $('.banner_in ol li').eq(num).addClass('current').siblings().removeClass('current');
            },2000)
         }
        //自動播放
         autoplay();
        //鼠標移上暫停
         $('#banner').hover(function(e) {
             clearInterval(timer);
        },function(){    
             autoplay();
        });
        //鼠標移上切換
        $('.banner_in ol li').mouseover(function(e) {
            zin++;
            $(this).addClass('current').siblings().removeClass('current');
            var index=$(this).index();
            $('.banner_in ul li').stop().hide().eq(index).fadeIn();
            $('.banner_in ul li').eq(index).css('z-index',zin);
            num=index;
        });
     })();
})

這樣代碼就可以正常在客戶端運行了,通過測試還挺靈敏的呢!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM