Question

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

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

可能我必须尝试不同的方法来实现这一点，这很好，但我想至少了解问题是什么。我也有工作Jsfiddle here。应该发生的是，每个窗口应在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>

的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

我找到答案，问题是“当前幻灯片”加起来的地方。这会增加每个动画幻灯片，因此“当前幻灯片”应从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);
    }

});

具有多个幻灯片的Jquery幻灯片显示间隔不起作用

2 个答案: