Question

我试图修改已在此处的解决方案，但总共有7个div，它们使用页面上的相同空间淡入/淡出。然后循环回第一个div重新开始。

我还需要有可变的时间，即div一个保持可见5秒，div 2保持可见3秒，div 3保持4秒等等，因为它取决于每个有多少内容。

我似乎无法成功添加第二个div，它在div二之后淡入（红色一个）。

我正在尝试修改代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script>
$(document).ready(function() {
   $('#one').delay(3000).fadeOut(100);
   $('#two').delay(3000).fadeIn(100);
 });
</script>

<style>
html, body {background-color: yellow}
#one {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 200;
  background-color: #00f;
  cursor: pointer;
}

#two {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 100;
  background-color: #f00;
  display: none;
}
</style>

<div id="one">Content for Div one to go here</div>
<div id="two">Content for Div two to go here</div>

非常感谢任何帮助。感谢。

Answer 1

所以，我将提供一些代码片段。第一个是指出JQuery中回调函数的概念以及递归回调。看一下这个脚本：

Primer Code

(function Recur(){
    $('#one').delay(3000).fadeOut(100,function(){
     $('#two').delay(3000).fadeIn(100,function(){
      $('#two').delay(3000).fadeOut(100,function(){
       $('#three').delay(3000).fadeIn(100,function(){
        $('#three').delay(3000).fadeOut(100,function(){
         $('#one').delay(3000).fadeIn(100, function(){
                Recur();
         })
        })
       });
      })
     });
   });
})();

我们在文档加载时调用了一个Immediately Invoked Function Expression的脚本。在div淡出之后，下一个淡入。然后在加载#one div之后，再次调用Recur()函数以启动循环。这给出了一种幻灯片效果。

请看小提琴：https://jsfiddle.net/n16bnm1L/1/

这并没有给你一个可变时序或任何东西的选项，并且当你向它添加更多元素时会变得更加麻烦，但它只是作为下一代码的概念的小教程我我提供：

使用可变时间工作幻灯片

如果您为每个元素添加了一个类并根据元素集的索引执行幻灯片显示怎么办？

var i = 0;
var length = $('.item').length;
var variableTime = 3000; //default time

(function Recur(){
    switch(i){
     case 0:
      variableTime = 5000;
      break;
     case 1: 
      variableTime = 3000;
      break;
     case 2:
      variableTime = 4000;
      break;
    }
   $('.item').eq(i++).delay(variableTime).fadeOut(1000,function(){
     if(i == length){
      i = 0;
     }
   $('.item').eq(i).fadeIn(1000,function(){
     Recur();
   });
 });
})();

这是小提琴：https://jsfiddle.net/n16bnm1L/2/

您可以在添加更多div时更新变量时间switch语句。只需确保添加类item的这些div元素。

更短的选项！

如果将变量次数作为变量次数的索引并且元素基本匹配，该怎么办？

var i = 0;
var length = $('.item').length;
var variableTime = [5000,3000,4000];
(function Recur(){
  $('.item').eq(i).delay(variableTime[i++]).fadeOut(1000,function(){
    if(i == length){
     i = 0;
    }
    $('.item').eq(i).fadeIn(1000,function(){
     Recur();
    });
  });
})();

这是一个小提琴：https://jsfiddle.net/n16bnm1L/4/

Answer 2

如果你需要一个fadein / fadeout循环，你可以这样做：

$(document).ready(function() {

loopbox();

function loopbox() {
    $('#one').fadeIn(100).delay(5000).fadeOut(100, function() {
      $('#two').fadeIn(100).delay(3000).fadeOut(100, function() {
        $('#three').fadeIn(100).delay(4000).fadeOut(100,function() {                                
        loopbox();
        });
      });
    });
  }
});

您可以在此回调函数中添加所需的div，并为每个div选择不同的时间。

这里是jsfiddle

Answer 3

我认为有更多正确的方法可以解决这个问题，但作为一种选择：

var cfg = { 
    "#one" : { delay : 1000, fade : 500},           
    "#two" : { delay : 2000, fade : 1000}, 
    "#three" : { delay : 3000, fade : 2000}
  };

var totalTime = 0;
$.each(cfg, function(k,v) { totalTime += v.delay + v.fade; });

loopDivs();
setInterval( loopDivs, totalTime);


function loopDivs(){  
  var d = 0;
  $.each(cfg, function(key, value){
    setTimeout( function(){ 
                    $(key).show()
                      .delay(value.delay)
                      .fadeOut(value.fade);
                  }, d);
    d += value.delay + value.fade;
  });
}

在此处查看完整代码https://jsfiddle.net/57n3mL82/

Answer 4

你这里有太多的冗余。你可以很简单地做到这一点。使用除id s

之外的类

您可以设置样式类，以便有一个基本样式，然后可以单独更改每个类中的任何不同，而不是重复代码。

以下内容还概述了如何执行此操作，而无需担心要淡入和淡出的div个。{/ p>

$(document).ready(function(){
  fadeNext($('#div-fader > div'), 0);
});

var fadeNext = function(that, index, fadeLast){
  
  //Set the newIndex to be passed back into this function
  //This will increment up to cycle through all of the divs
  //that are children of #div-fader
  //
  var newIndex = index+1;
  
  //If the Index is 0, then we know it is either the first time
  //around, or the fader is restarting
  //
  if(index == 0) {
    
    //the fadeLast flag, that is only passed to the function recursively
    //will tell the program that the last div (in this case the #six) is still
    //showing and needs to be hidden
    //
    if(fadeLast == true) {
      $($(that)[$(that).length-1]).fadeOut(100);
    }
    
    //Regardless, when the index is 0 always fade in the first div
    //
    $($(that)[index]).fadeIn(100);
  }
  
  //Otherwise, while the index is less than the length of $(that)
  //$(that) = #div-fader's div children
  //so length in this case will be 6 as there are 6 children of #div-fader
  //
  else if(index < $(that).length){
    $($(that)[index-1]).fadeOut(100);
    $($(that)[index]).fadeIn(100);
  }
  
  //Lastly, if we do not meet any of the above conditions, that means
  //we are at the last child of #div-fader and should go back to the start
  //
  else newIndex = 0;
  
  //the setTimeout will be where you set the timing in between each element
  //to call. So each div will fade-in and out at a rate of 1000ms
  //
  setTimeout(function(){
    
    //look at what is passed back into this function, remember the fadeLast flag?
    //that is passed here as true, because we are starting the cycle over
    //and the last div needs to be faded out
    //
    fadeNext(that, newIndex, true);
  }, 1000);
}

#div-fader > div {  
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  display: none;
}

#one, #div-fader > div:nth-child(odd) {
  background-color: #00f;
  cursor: pointer;
}

#two, #div-fader > div:nth-child(even) {
  background-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-fader">
  <div id="one">Content for Div one to go here</div>
  <div id="two">Content for Div two to go here</div>
  <div id="three">Content for Div three to go here</div>
  <div id="four">Content for Div four to go here</div>
  <div id="five">Content for Div five to go here</div>
  <div id="six">Content for Div six to go here</div>
</div>

jQuery淡入/淡出具有可变时序的div

4 个答案: