SlidesJS 3.0.4 在手机上遇到的一些问题及解决办法

SlidesJS 3.0.4 http://slidesjs.com

在手机上遇到的一些问题及解决办法

1.手机上打开有sliderjs的页面后, 切换到别的页面再回来时, sliderjs部分不能滑动了
2.手机上打开有sliderjs的页面后, 在sliderjs部分不断的进行上下滑动时, 会出现空白的情况

html:

 1 <div class="m-banner">
 2   <p class="prev"><span class="spr_btnPrev"></span></p>
 3   <p class="next"><span class="spr_btnNext"></span></p>
 4   <div class="bnrImg">
 5     <div class="banner bnr4"><a target="_blank" href="//genji.anipani.jp/">源氏物語 男女逆転恋唄</a></div>
 6     <div class="banner bnr1"><a target="_blank" href="#">DAME×PRINCE</a></div>
 7     <div class="banner bnr2"><a target="_blank" href="#">君の秘密にドラマなキスを</a></div>
 8     <div class="banner bnr3"><a target="_blank" href="#">美男高校地球防衛部LOVE！GAME！</a></div>
 9   </div>
10   <ul class="btnDot">
11     <li><span class="spr_btnDot on"></span></li>
12     <li><span class="spr_btnDot"></span></li>
13     <li><span class="spr_btnDot"></span></li>
14     <li><span class="spr_btnDot"></span></li>
15   </ul>
16 </div>

js: 问题解决见代码58 59行

jQuery(function($){
  var $btnDot = $('.btnDot');
  var $navigation, $pagination, $previous, $next;
  var si = 0;
  var $spr_btnDot = $btnDot.find('.spr_btnDot');

  function handle(){
    clearInterval(si);
    si = setInterval(function(){
      $next.click();
    }, 5000);
  }
  $('.bnrImg').slidesjs({
    width: 320,
    height: 300,
    play: {
      interval: 5000,
      auto: false
    },
    callback: {
      loaded: function(num){
        $(".slidesjs-container").css("height", $('.bnrImg').height());
        $navigation = $('.slidesjs-navigation');
        $pagination = $('.slidesjs-pagination');
        $previous = $('.slidesjs-previous');
        $next = $('.slidesjs-next');
        handle();
      },
      complete: function(num){
        $spr_btnDot.removeClass('on');
        $spr_btnDot.eq(num-1).addClass('on');
      }
    }
  });

  $navigation.hide();
  $pagination.hide();
  var $m_banner = $('.m-banner');
  $m_banner.on('click', '.spr_btnPrev', function(){
    $previous.click();
    handle();
  });
  $m_banner.on('click', '.spr_btnNext', function(){
    $next.click();
    handle();
  });

  $btnDot.on('click', '.spr_btnDot', function(){
    var $this = $(this);
    var idx = $spr_btnDot.index($this);
    $pagination.find('a').eq(idx).click();
    handle();
  });

  function getMobileOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) || userAgent.match( /Android/i )) {
      $(window).unbind("resize");   //解决问题2
      window.onblur = function() {  //解决问题1
        clearInterval(si);
      };
      window.onfocus = function() {
        handle();
      };
    }
  }

  window.onload = function(){
    getMobileOperatingSystem();
  }

});