为什么不是所有图像都显示在此滑块中？

问题描述：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      var startSlider = function() { 
       var startSlide = $(".slider li:first"); 
       var nextSlide = $(".active").next("li"); 
       $(".active").removeClass(); 

       if(nextSlide.html() == null) { 
        nextSlide = startSlide; 
       } 

       nextSlide.addClass("active"); 

       setTimeout(startSlider, 1000); 
      }; 

      setTimeout(startSlider, 1000); 
     }); 
    </script> 
    <style> 
     .active{ 
      display:none; 
     } 
    </style> 
</head> 
<body> 
    <ul class="slider" style="list-style:none;"> 
    <li><div class="active" style="background:#F00;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li> 
    <li><div style="background:#0F0;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></div></li> 
    <li><div style="background:#00F;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></li> 
    <li><div style="background:#000;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li> 
    </ul> 
</body> 
</html>

当我再次运行该代码只蓝色和黑色的div显示出来，并again.What可以为更多钞票的原因吗？我试图把积极的课程放在不同的位置，但它没有帮助。我删除了错误的建议，回答它不是在原始代码中，只出现在这里。

如果您编辑您的问题，请指定哪些更新，而不是直接编辑并保存你的问题后，。 – ikartik90 2014-09-27 13:47:34

图像在哪里？四个'li'标签中只有一个div。 – ekad 2014-09-27 13:49:55

我只是现在使用div。放置图像不应该有任何影响，我认为。这只是要开始我想的课程。 – 2014-09-27 13:52:32

答

您的脚本将从第一个div开始，将class="active"设置为四个div中的一个。由于这是active CSS类的定义

<style> 
    .active{ 
     display:none; 
    } 
</style>

有class="active"目前的div会消失，但其他三个也不会和他们放在完全相同的位置，所以只有较暗的颜色可可见，在这种情况下是蓝色和黑色。

我会建议使用两个CSS类如下

<style> 
    .active{ 
     display:block; 
    } 
    .inactive{ 
     display:none; 
    } 
</style>

，改变你的脚本，使一个DIV具有class="active"其余的也class="inactive"的时间，这意味着active DIV便会出现，inactive div一定消失。

<script> 
    $(document).ready(function() { 
     var startSlider = function() { 
      var startSlide = $(".slider li:first"); 
      var nextSlide = $(".active").next("li"); 

      // remove css class from all divs 
      $(".active").removeClass(); 
      $(".inactive").removeClass(); 

      if(nextSlide.html() == null) 
      {nextSlide = startSlide;} 

      // set nextSlide css class to active 
      nextSlide.addClass("active"); 

      // set the rest of the divs css class to inactive 
      nextSlide.siblings().addClass("inactive"); 

      setTimeout(startSlider, 1000); 
     }; 
     setTimeout(startSlider, 1000); 
    }); 

</script>

下面是完成上述更改后的完整代码。

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     var startSlider = function() { 
      var startSlide = $(".slider li:first"); 
      var nextSlide = $(".active").next("li"); 

      // remove css class from all divs 
      $(".active").removeClass(); 
      $(".inactive").removeClass(); 

      if(nextSlide.html() == null) 
      {nextSlide = startSlide;} 

      // set nextSlide css class to active 
      nextSlide.addClass("active"); 

      // set the rest of the divs css class to inactive 
      nextSlide.siblings().addClass("inactive"); 

      setTimeout(startSlider, 1000); 
     }; 
     setTimeout(startSlider, 1000); 
    }); 

</script> 
<style> 
    .active{ 
     display:block; 
    } 
    .inactive{ 
     display:none; 
    } 
</style> 
</head> 
<body> 

    <ul class="slider" style="list-style:none;"> 
    <li><div class="active" style="background:#F00;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li> 
    <li><div class="inactive" style="background:#0F0;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></div></li> 
    <li><div class="inactive" style="background:#00F;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></div></li> 
    <li><div class="inactive" style="background:#000;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li> 
    </ul> 

</body> 
</html>

这里是工作的jsfiddle：http://jsfiddle.net/k8qod5g0/

标签在原始代码中关闭。 – 2014-09-27 13:46:18

请检查最新的答案，我认为这是你要找的。 – ekad 2014-09-27 14:29:32

为什么不是所有图像都显示在此滑块中？

相关推荐