滑塊功能不像safari所期望的那樣在Chrome/Firefox中運行

Question

我有一個slider函數可以自動運行一組列表項。
在Chrome和Firefox，靜止圖像是自動旋轉後的第一個。
不幸的是，在Safari和IE中，它取決於最後的圖像。我認爲這可能是一個樣式問題，但我沒有使用任何會導致此問題的樣式。我也認爲可能是setInterval()或setTimeout()導致不一致。我無法鎖定原因。

$(function ($) { 

    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    $('#slider').css({ width: slideWidth, height: slideHeight }); 

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    $('#slider ul li:last-child').prependTo('#slider ul'); 

    function moveLeft() { 
     $('#slider ul').animate({ 
      left: + slideWidth 
     }, 800, function() { 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    function moveRight() { 
     $('#slider ul').animate({ 
      left: - slideWidth 
     }, 800, function() { 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    $('.sa-left').click(function() { 
     moveLeft(); 
     clearInterval(auto); 
    }); 

    $('.sa-right').click(function() { 
     moveRight(); 
     clearInterval(auto); 
    }); 


    var auto = setInterval(moveRight, 1000); 

    var stopOnSlide = slideCount*1000+1000; 

    window.setTimeout(function(){ 
     clearInterval(auto); 

     $('.sa-left , .sa-right').delay(1000).fadeIn('slow'); 

    }, stopOnSlide); 
}); 

我在這裏錯過了什麼？我已經研究過這個具體問題，並沒有發現這個問題可能是什麼。

<div id="container"> 

     <div id="sliderContainer"> 
      <div id="slider"> 
       <div class="slider-arrow sa-left"><img src='arrowLeft.png'/></div> 
       <div class="slider-arrow sa-right"><img src='arrowRight.png'/></div> 
       <ul> 
        <li id='toggle1'><img src="t1.png"></li> 
        <li id='toggle2'><img src="t2.png"></li> 
        <li id='toggle3'><img src="t3.png"></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <!--[if lt IE 9]> 
     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

    <!-- crucial scripts --> 
    <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 

    /<!-- plugin scripts --> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineLite.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/draggabilly/1.2.0/draggabilly.pkgd.min.js"></script> 

    <!-- custom scripts --> 
    <script type="text/javascript" src="script.js"></script> 

Answer 1

更新JS

$(function ($) { 

    var slider = $('#slider ul'); 
    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 
    var transitionDuration = 400; 
    var sliderDuration = 4000; 
    var activeSlide = 1; 
    var autoSlide; 
    var setAuto = true; 



    $('#slider').css({ width: slideWidth, height: slideHeight, overflow: 'hidden',position:'relative' }); 

    $('#slider ul').css({ width: sliderUlWidth, position: 'absolute'}); 

    function sliderAnimate() { 
     clearInterval(autoSlide); 

     slider.animate({ 
      left: -(activeSlide-1)*slideWidth 
     },transitionDuration); 

     if(setAuto){ 
      autoSlideHandler(); 
     }   

    }; 

    sliderAnimate(); 

    function autoSlideHandler(){ 

     autoSlide = setInterval(function(){ 

      if(activeSlide<slideCount){ 
       activeSlide++; 
       sliderAnimate(); 
      }else { 
       swapFirstToLast(); 
       setAuto = false; 
       $('.sa-left , .sa-right').fadeIn('slow'); 
       sliderAnimate() 
      } 

     },sliderDuration); 
    } 

    $('.sa-left').click(function() { 
     if(activeSlide >1){ 
      activeSlide--; 
      sliderAnimate(); 
     }else { 
      swapLastToFirst(); 
      sliderAnimate() 
     } 
    }); 

    $('.sa-right').click(function() { 
     if(activeSlide < slideCount){ 
      activeSlide++; 
      sliderAnimate(); 
     }else { 
      swapFirstToLast(); 
      sliderAnimate() 
     } 
    }); 

    function swapFirstToLast(){ 
     var firstSlide = slider.find('li:first-child'); 
     slider.append(firstSlide.clone()); 
     slider.css('left',-(activeSlide-2)*slideWidth); 
     firstSlide.remove() 
    } 

    function swapLastToFirst(){ 
     var lastChild = slider.find('li:last-child'); 
     slider.prepend(lastChild.clone()).css('left',-(activeSlide)*slideWidth); 
     lastChild.remove(); 
    } 


}); 

Working demo using your code

Updated demo(continuous slider)