Question

我需要循环这个脚本，但我不知道该怎么做......

$(zaj).ready(function(){

    $("#zaj1").fadeOut(6000);
    $('#zaj2').delay(7000).fadeOut(6000);
    $('#zaj1').delay(7000).fadeIn(6000);

});

我想循环这个。这正在改变div的背景img。

Answer 1

尝试：

$(zaj).ready(function(){
   var flag = 1;
   do{
      $("#zaj1").fadeOut(6000function(){
          $('#zaj2').delay(7000).fadeOut(6000, function(){
                $('#zaj1').delay(7000).fadeIn(6000);
          });
      });

   }while(flag ==1);
});

但同样，它会按照你的要求行事，但你可以找到更好的方法......比如：

$(zaj).ready(function(){
   setInterval(function(){
      $("#zaj1").fadeOut(6000, function(){
          $('#zaj2').fadeOut(6000, function(){
                $('#zaj1').fadeIn(6000);
          });
      });
   }, 19000);
});

Answer 2

选择要循环的元素。
启动一个变量来存储哪个元素现在可见
使用setInterval
每次运行后更新'当前'

$("document").ready(function(){
  var elements=$("#zaj1, #zaj2, #zaj3");
  current=0;
  elements.eq(current).fadeIn(6000);
  setInterval(function(){
    var next=current+1>elements.length-1?0:current+1;
    elements.eq(current).fadeOut(6000);
    elements.eq(next).fadeIn(6000);
    current=next;
  },7000);
});

[id^=zaj]{
  display: none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="zaj1">One</div>
<div id="zaj2">Two</div>
<div id="zaj3">Three</div>

Answer 3

清洁代码，因此它具有干净的递归循环 https://jsfiddle.net/egwmpsa7/

function start() {
    $("#first").fadeOut(1000, function() {
        $('#second').delay(1500).fadeOut(1000);
        $('#first').delay(1500).fadeIn(1000, function() {
            $('#second').delay(1500).fadeIn(1000, start);
            setTimeout(start, 1500)
        });
    })
}
start();



<div id="first">first</div>
<div id="second">second</div>

Answer 4

我的解决方案：

function() {
    $('#zaj1').fadeIn(1000).delay(2000).fadeOut(1000, function() {
        $('#zaj2').fadeIn(1000).delay(2000).fadeOut(1000);
    })           
}

$(document).ready(function(){    
   setInterval(fades, 8000);
   fades();
});

HTML：

<p id='zaj1' style="display: none;">
  zaj1
</p>
<p id='zaj2' style="display: none;">
  zaj2
</p>

演示：https://jsfiddle.net/gjfg22bz/4/

Answer 5

当您添加更多可能的图像时，可以进行快速缩放。您所要做的就是在顶部自定义变量，然后就完成了。该功能将处理其余部分。

var images = ['#zaj1', '#zaj2']; // Add as many as you want
var delayTime = 1000; // The time the image shows before starting the fade process
var fadeTime = 6000; // How fast the fadein/out should happen
var currentIndex = 0;

function loopOverImages() {

    $(images[currentIndex]).delay(delayTime).fadeOut(fadeTime, function () {

        ++currentIndex;
        if (currentIndex == images.length) {
            currentIndex = 0;
        }

        $(images[currentIndex]).fadeIn(fadeTime, loopOverImages);
    });
}

loopOverImages(); // Call immediately to start the process

查看非常简单的代码段，以帮助说明这是多么简单：

var images = ['#zaj1', '#zaj2', '#zaj3'];
var currentIndex = 0;
var delayTime = 2000;
var fadeTime = 1000;

function loopOverImages() {

  $(images[currentIndex]).delay(delayTime).fadeOut(fadeTime, function() {

    ++currentIndex;
    if (currentIndex == images.length) {
      currentIndex = 0;
    }

    $(images[currentIndex]).fadeIn(fadeTime, loopOverImages);
  });
}

loopOverImages();

div {
  width: 100px;
  height: 100px;
  display: none;
}
#zaj1 {
  background-color: rebeccapurple;
  display: block;
}
#zaj2 {
  background-color: #f08e86;
}
#zaj3 {
  background-color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<div id="zaj1"></div>
<div id="zaj2"></div>
<div id="zaj3"></div>

如何循环淡出需要改变div img

5 个答案: