javascript - slider 功能在 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)