Question

我有多个幻灯片，但只想要一个由id选择的运行。其余的关闭并隐藏起来。我有第一个加载onload。我有一个嵌套的for循环运行并打开和关闭它们。这不是一贯的。

我在互联网上找到的一些代码。外部for循环在任何id被选中之前运行。我甚至不知道在激活新滑块之前是否正确停止了活动滑块。我的循环似乎只有警报，没有幻灯片的代码才能正常工作。然后，当我介绍幻灯片时，它有时会工作但不一致。选择id 1或2似乎有效，但有时它不会循环嵌套的3或4。某种冲突还是逻辑错误？请帮助这个绝望的初学者。我自告奋勇为我们的合唱团做这件事很抱歉，我无法正确格式化代码以供查看。

好的，我添加了jsfiddle https://jsfiddle.net/5s0q30s8/

循环仅使用警报。

 <button id=1>Group Photos</button>
 <button id=2>Miscellaneous</button>
 <button id=3>Trips</button>
 <button id=4>Old Pictures</button>
<script>

    var buttons = document.getElementsByTagName("button");
    var buttonsCount = buttons.length;
    for (var i=0; i <= buttonsCount; i+=1){
        buttons[i].onclick=function(e){
        var id= this.id;
        alert(id + ' clicked');
        for (var i=1; i <= buttonsCount; i+=1){
             alert('nested for' + i);
             if (i != id) {
             var temp = ('.slider-wrapper ' + i)
             alert('Not id ' + temp);
             $('.slider-wrapper' + i).hide();
             /*  $('#slider' + i).hide(); */
             $('#slider' + i).data('nivoslider').stop(); 
              }
             else {
             alert('true '+ i);
             $('.slider-wrapper' + i).show();
             $('#slider' + i).nivoSlider({       effect: 'fade'       }  ); 
            } //end else

            } //end nested for
        };
    } //end for
  </script>

 <div class="slider-wrapper1 theme-default">
               <div id="slider1" class="nivoSlider">
                <img src="images/Choir2014.jpg" alt="" title="2014" />
                   ........More images.                           
                 </div>
 </div>

 <div class="slider-wrapper2 theme-default">
               <div id="slider2" class="nivoSlider">
                <img src="images/Choir2014.jpg" alt="" title="2014" />
                   ........More images.                           
                 </div>
 </div>
 <div class="slider-wrapper3 theme-default">
               <div id="slider3" class="nivoSlider">
                <img src="images/Choir2014.jpg" alt="" title="2014" />
                   ........More images.                           
                 </div>
 </div>
 <div class="slider-wrapper4 theme-default">
               <div id="slider4" class="nivoSlider">
                <img src="images/Choir2014.jpg" alt="" title="2014" />
                   ........More images.                           
                 </div>
 </div>
<script type="text/javascript">
$(window).load(function() {
    $('#slider1').nivoSlider({       effect: 'fade'       });
});

</script>

Answer 1

我必须说，你的代码在我眼中非常混乱。我确实看到你努力使用jQuery，所以我假设你能够使用它。

我理解你的目标：

有4个滑块
有4个按钮
您点击一个按钮，相应的幻灯片显示。

$('#slideButtons button').click(function(){
  var id = $(this).attr("id");
  $('#content .slide:visible').hide();
  $('#content #c' + id).show();
  // Any other logic can be put here, like starting or stopping sliders.
});

/* Show the first slider, and hide everything else by applying display:none to it */
#content div:not(#c1) {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideButtons">
  <button id="1">1</button>
  <button id="2">2</button>
  <button id="3">3</button>
  <button id="4">4</button>
</div>

<div id="content">
  <div class="slide" id="c1">Number 1! Put Slideshow 1 here.</div>
  <div class="slide" id="c2">Number 2! Put Slideshow 2 here.</div>
  <div class="slide" id="c3">Number 3! Put Slideshow 3 here.</div>
  <div class="slide" id="c4">Number 4! Put Slideshow 4 here.</div>
</div>

从这里你可以建立它。我相信它看起来会更干净。此外，如果您要使用这么多警报进行调试，请尝试使用console.log而不是alert。它的侵入性要小得多，你可以简单地通读它。

嵌套For循环以激活幻灯片放映并关闭另一个

1 个答案: