我有一个滑块功能,可以自动运行一组列表项.在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();
    }


});

Working demo using your code

Updated demo(continuous slider)