Javascript 滑块功能在safari中不像在chrome/firefox中那样运行

我有一个

滑块

功能，可以自动运行一组列表项。
在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>

/

更新的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();
    }


});

$（函数（$）{
变量滑块=$（“#滑块ul”）；
var slideCount=$（'#slider ul li'）。长度；
var slideWidth=$（'#slider ul li'）.width（）；
var slideHeight=$（'#slider ul li'）.height（）；
var sliderUlWidth=slideCount*slideWidth；
var转换持续时间=400；
var sliderDuration=4000；
var=1；
var自动滑动；
var setAuto=true；
$（'#slider'）.css（{宽度：slideWidth，高度：slideHeight，溢出：“隐藏”，位置：'relative'}）；
$（'#slider ul'）.css（{宽度：sliderUlWidth，位置：'绝对'}）；
函数sliderAnimate（）{
clearInterval（自动滑动）；
滑块。动画({
左：-（活动幻灯片-1）*幻灯片宽度
}，过渡期）；
如果（设置自动）{
autoSlideHandler（）；
}           
};
sliderAnimate（）；
函数autoSlideHandler（）{
autoSlide=setInterval（函数（）{
如果（活动幻灯片1）{
活动幻灯片--；
sliderAnimate（）；
}否则{
swapLastToFirst（）；
sliderAnimate（）
}
});
$（'.sa right'）。单击（函数（）{
如果（活动幻灯片<幻灯片计数）{
activeSlide++；
sliderAnimate（）；
}否则{
swapFirstToLast（）；
sliderAnimate（）
}
});
函数swapFirstToLast（）{
var firstSlide=slider.find（'li:firstchild'）；
slider.append（firstSlide.clone（））；
css（'left'，-（activeSlide-2）*slideWidth）；
firstSlide.remove（）
}
函数swapLastToFirst（）{
var lastChild=slider.find（'li:lastChild'）；
slider.prepend（lastChild.clone（））.css（'left'，-（activeSlide）*slideWidth）；
lastChild.remove（）；
}
});

---

能否请您也发布您的

html

。我认为html没有必要包含在内，但我已将其添加到原始帖子中。问题不太清楚，这就是我要求发布html的原因。请检查答案。如果需要进一步更新，请继续发布。问题是：幻灯片自动设置动画后，我想返回初始slide并停止动画。它在Chrome和Firefix中工作，而在Safari中不工作。更新的JS删除了我在第一个周期后用来停止运行动画的设置间隔，但我需要它。我已经更新了我的答案和小提琴。请现在检查。您的代码非常简单、干净，更重要的是，它可以跨浏览器工作。谢谢你的眼睛、大脑和帮助。你删除了我添加和准备第一个剪辑的位置，以便箭头在任意方向循环。这会改变箭头在列表项的末尾或开头时的行为。你这样做的逻辑是什么？虽然我喜欢此变体，但我不想失去功能能够使用任意一个箭头循环的不稳定性，这让我回到了我的原始问题。我认为setInterval和setTimeout存在冲突。