我是jQuery / java脚本的新手;试图做一个滑块。请解决以下问题。

我想使div(类是滑块)永远淡出和淡入;请检查此代码。
是否可以为此使用setInterval()函数?

<html>
<head>
    <title>Slider</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery/jquery.min.js"></script>
    <style>
        .slider1{
            width: 500px;
            height: 250px;
            margin: 0 auto;
            background-image: url(images/rectblue.png);
        }
    </style>
    <script type="text/javascript">
        var runForever = $(document).ready(function () {

            $(".slider1").fadeOut(2000, function () {
                $(".slider1").fadeIn(2000);
            });

        });

        runForever();
        //setInterval(runForever, 4000);
        //This runs the function 'runForever' one time only, how to run it every 4 sec?
        //the above commented out code does not work.

    </script>
</head>
<body>
    <div class="slider1"></div>
</body>

最佳答案

您没有将runforever定义为函数,而是将其作为对$(document).ready的调用的结果。如果将其定义为函数并将其放在setInterval中,则它将起作用。

var flashSlider = function () {
    $(".slider1").fadeOut(2000, function () {
        $(".slider1").fadeIn(2000);
    });
};
$(document).ready(function () {
    setInterval(flashSlider, 4000);
});


小提琴:http://jsfiddle.net/uoqdfhdb/

我认为以递归方式永久写入Flash更加优雅一些:

var flashForever = function () {
    $(".slider1").fadeOut(2000).fadeIn(2000, flashForever);
};
$(document).ready(function () {
    flashForever();
});


http://jsfiddle.net/uoqdfhdb/1/

除了我不知道尾递归是否最终会导致堆栈溢出。

10-08 18:29