Jquery 包含多个幻灯片的幻灯片放映间隔不起作用

Question

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

但是，当使用以下代码时，只有第三个窗格按预期工作，我不确定为什么。任何人都可以帮助解释原因并考虑修复它吗？

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

 <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>

Jscript

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

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


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

//begin the slide show
startSlider();              

function startSlider(){

            //set interval
            interval = setInterval(function(){
                console.log(currentSlide + " of " + $SlidesLength);
                //margin left -720
                $SlideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
                //callback
                currentSlide++;
                currentID++;

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

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


                });

            }, pause);
    }

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

 });//end of document ready

CSS

 .windows {
  height: 200px;
 width: 100%;
 display: inline-block;
 margin-top: 20px;
 background-color: #C2F0FF;
 }

 .sliderWindow {
 margin-left: 10%;
 height: 100px;
 /*width: 20%;*/
 width: 100px;
 background-color: #2EB8E6;
 display: inline;
 float: left;
 overflow: hidden;
 }

 .slidesWindow{
 display: block;
 width: 300px;
 height: 100px;
 margin: 0;
 padding: 0;
 }

 .slideWindow {
 float: left;
 list-style-type: none;
 /*width: 100%;*/
 width: 100px;
 height: 100px;
 }

Answer 1

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

Answer 2

我找到了答案，问题是 "current slide" 加起来的地方。这为每张动画幻灯片加起来，因此 "current slide" 应该从 0 开始，幻灯片长度应该等于幻灯片的数量乘以 windows 的数量。

因此答案是：

$(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);
    }

});

Jquery 包含多个幻灯片的幻灯片放映间隔不起作用

Jquery slideshow with multiple slideshows Interval not working

html

javascript

jquery

slideshow

setinterval