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

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

javascript jquery css

Javascript 为什么不是所有图像都显示在此滑块中？,javascript,jquery,css,Javascript,Jquery,Css,这是我的密码 <!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 = fu

这是我的密码

<!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一次又一次地出现。可能的原因是什么？我试图将活动类放在不同的位置，但没有帮助。我删除了回答中建议的打字错误，它不在原始代码中，仅在此处显示。

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

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

并更改脚本，使一个div的class=active，其余div的class=inactive，这意味着活动div将出现，而非活动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>

下面是正在工作的JSFIDLE:

如果您编辑了问题，请指定您在问题中所做的更新，而不是直接编辑和保存。图像在哪里？四个li标签中只有一个div。我现在只使用div。我认为，放图片应该不会有任何效果。我认为这只是关于切换类。第三个li中的div没有结束标记。添加结束div标记后，它仍然不工作。请检查更新的答案，我认为这就是您要查找的。

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