Question

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

我想让div（class is slider）淡出淡出并永远淡入;请检查此代码。是否可以使用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>

Answer 1

您没有将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是更优雅的jQuery：

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

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

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

Answer 2

这应该有效：

var $slider = $('.slider1');
var flashSlider = function () {
  $slider.fadeToggle(2000, flashSlider);
};

$(document).ready(function () {
  flashSlider();
});

Answer 3

   $(document).ready(function () {
      var $slider1 =  $(".slider1");
      function runForever(){
          $slider1.fadeOut(2000, function () {
            $slider1.fadeIn(2000);
          });
          clearTimeout(t);
          var t = setTimeout(runForever, 4000);
     }
     runForever();
  });

Answer 4

是的，这是可能的。您应该将所有代码放在$（document）.ready参数中作为回调函数，您不能将其作为函数捕获。它是文档对象的监听器，以确保加载所有内容。所以看起来应该是这样的：

    $(document).ready(function () {

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

      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.
    });

Answer 5

让我重写你的代码：

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

这是live preview

你也可以编写一个递归函数，在完成动画后一次又一次地调用自己：

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

永远运行jquery任务

5 个答案: