Question

这是我的代码

<!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一次又一次出现。这可能是什么原因？我试图将活动课程放在不同的位置，但它没有帮助。我删除了答案中建议的错字，它不在原始代码中，只出现在这里。

Answer 1

您的脚本会从第一个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/

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

1 个答案: