Javascript Jquery幻灯片放映，多个幻灯片放映间隔不起作用

我已经设置了一个jquery幻灯片，从其他人那里借用了一些代码。我想用同样的逻辑同时制作三个幻灯片窗格的动画（它们应该同时移动和暂停）

但是，当使用下面的代码时，只有第三个窗格按预期工作，我不知道为什么。有人能解释一下原因，看看如何修复它吗

也许我必须尝试不同的方法来实现这一点，这很好，但我想至少了解问题所在。我也有工作。应该发生的是，每一个窗口在10秒后应移到下一张幻灯片，然后在10秒后应返回到原始幻灯片。只有第三个窗口正确地执行此操作，其他窗口跳过了间隔

 <div class='windows'>

    <div id='sliderWindow1' class='sliderWindow'>

            <ul class='slidesWindow'>
            <!-- Trend Graph -->
                <li class='slideWindow'>
                    <div id='trendGraph'>Pane 1</div> <!--jscript to get chart -->
                </li>
                <!-- total number of votes -->
                <li class='slideWindow'>
                    <div id='totalVotes'>Pane 2</div> <!--jscript to get chart -->
                </li>
                <li class='slideWindow'>
                    <div id='trendGraph2'>Pane 1</div> <!--jscript to get chart -->
                </li>
            </ul>

    </div>



    <div id='sliderWindow2' class='sliderWindow'>
        <ul class='slidesWindow'>

            <!-- Related Polls -->
                <li class='slideWindow'>
                    <div id='related'>Pane 1b</div> <!--jscript to get chart -->
                </li>
                <!-- Likes -->
                <li class='slideWindow'>
                    <div id='likesAndLiker'>Pane 2b</div> <!--jscript to get chart -->
                </li>
                <li class='slideWindow'>
                    <div id='relatedPolls2'>Pane 1b</div> <!--jscript to get chart -->
                </li>

            </ul>

    </div>

    <div id='sliderWindow3' class='sliderWindow'>
        <ul class='slidesWindow'>
            <!-- Your Vote -->
                <li class='slideWindow'>
                    <div id='yourLike'>Pane 1c</div> <!--jscript to get chart -->
                </li>
                <!-- total number of votes -->
                <li class='slideWindow'>
                    <div id='OtherThing'>Pane 2c</div> <!--jscript to get chart -->
                </li>
                <li class='slideWindow'>
                    <div id='yourLike2'>Pane 1c</div> <!--jscript to get chart -->
                </li>
            </ul>

    </div>



</div>

CSS

---

从JSfiddle中，我无法找出您想要的确切响应。但我想，前几天在bootstrap/jquery中使用多个accordion元素时，我遇到了类似的问题。这个问题的解决方案是在我第二次和第三次使用手风琴时重命名div id和class id。类似地，您可以检查div id和class id名称，看看是否可以在元素的第二个和第三个副本中更改它们的名称。

从JSFIDLE中，我无法找出您想要的确切响应。但我想，前几天在bootstrap/jquery中使用多个accordion元素时，我遇到了类似的问题。这个问题的解决方案是在我第二次和第三次使用手风琴时重命名div id和class id。类似的做法是检查div id和class id名称，看看是否可以在元素的第二个和第三个副本中更改它们的名称。

我找到了答案，问题是“当前幻灯片”的累计位置。这是每个动画幻灯片的总和，因此“当前幻灯片”应从0开始，幻灯片长度应等于幻灯片数乘以窗口数

因此，答案是：

$(document).ready(function(){
//configuration
    var width = 100;
    var animationSpeed = 1000;
    var pause = 12000;
    var currentID = 0;
    var currentSlide = 0;
    var height = 100;
    var StopCounting = true;

    //cache DOM     
    var $Slider = $('.sliderWindow');
    var $SlideContainer = $Slider.find(".slidesWindow");
    var $Slides = $SlideContainer.find(".slideWindow");
    var $SlidesLength = 6;
    var interval;


    $Slider.on('mouseenter', pauseSlider).on('mouseleave', startSlider);

//begin the slide show
startSlider();              

function startSlider(){

            //set interval
            interval = setInterval(function(){

                //margin left -720
                $SlideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
                //callback
                currentSlide++;
                currentID++;
                    alert(currentSlide);

                //if this is the last slide go to position one (0px)
                if(currentSlide === $SlidesLength){

                currentSlide = 0;
                $SlideContainer.css('margin-left', 0);
                StopCounting = true;
                }


                });

            }, pause);
    }

    //pause the slider by clearing the interval
    function pauseSlider(){
    clearInterval(interval);
    }

});

---

我找到了答案，问题是“当前幻灯片”的累计位置。这是每个动画幻灯片的总和，因此“当前幻灯片”应从0开始，幻灯片长度应等于幻灯片数乘以窗口数

因此，答案是：

$(document).ready(function(){
//configuration
    var width = 100;
    var animationSpeed = 1000;
    var pause = 12000;
    var currentID = 0;
    var currentSlide = 0;
    var height = 100;
    var StopCounting = true;

    //cache DOM     
    var $Slider = $('.sliderWindow');
    var $SlideContainer = $Slider.find(".slidesWindow");
    var $Slides = $SlideContainer.find(".slideWindow");
    var $SlidesLength = 6;
    var interval;


    $Slider.on('mouseenter', pauseSlider).on('mouseleave', startSlider);

//begin the slide show
startSlider();              

function startSlider(){

            //set interval
            interval = setInterval(function(){

                //margin left -720
                $SlideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
                //callback
                currentSlide++;
                currentID++;
                    alert(currentSlide);

                //if this is the last slide go to position one (0px)
                if(currentSlide === $SlidesLength){

                currentSlide = 0;
                $SlideContainer.css('margin-left', 0);
                StopCounting = true;
                }


                });

            }, pause);
    }

    //pause the slider by clearing the interval
    function pauseSlider(){
    clearInterval(interval);
    }

});

$(document).ready(function(){
//configuration
    var width = 100;
    var animationSpeed = 1000;
    var pause = 12000;
    var currentID = 0;
    var currentSlide = 0;
    var height = 100;
    var StopCounting = true;

    //cache DOM     
    var $Slider = $('.sliderWindow');
    var $SlideContainer = $Slider.find(".slidesWindow");
    var $Slides = $SlideContainer.find(".slideWindow");
    var $SlidesLength = 6;
    var interval;


    $Slider.on('mouseenter', pauseSlider).on('mouseleave', startSlider);

//begin the slide show
startSlider();              

function startSlider(){

            //set interval
            interval = setInterval(function(){

                //margin left -720
                $SlideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
                //callback
                currentSlide++;
                currentID++;
                    alert(currentSlide);

                //if this is the last slide go to position one (0px)
                if(currentSlide === $SlidesLength){

                currentSlide = 0;
                $SlideContainer.css('margin-left', 0);
                StopCounting = true;
                }


                });

            }, pause);
    }

    //pause the slider by clearing the interval
    function pauseSlider(){
    clearInterval(interval);
    }

});