多个div之间自动淡入/显示

什么是我可以在我的网页上加载的简单jQuery脚本，它将在三个“盒子”div中的每一个之间自动淡出，并重复？ 我希望它显示一个div 5秒，同时隐藏其他两个，然后运行1秒淡入淡出过渡到下一个。

这三个div目前堆叠在一起。

 
text1
 
text2
 
text3
  

Answer 1

你可以试试这个：

 $(document).ready(function () { var allBoxes = $("div.boxes").children("div"); transitionBox(null, allBoxes.first()); }); function transitionBox(from, to) { function next() { var nextTo; if (to.is(":last-child")) { nextTo = to.closest(".boxes").children("div").first(); } else { nextTo = to.next(); } to.fadeIn(500, function () { setTimeout(function () { transitionBox(to, nextTo); }, 5000); }); } if (from) { from.fadeOut(500, next); } else { next(); } } 

演示： http ： //jsfiddle.net/CYJLA/

我确信它可以清理和/或更有效率，但我只是把它放在一起让它工作。

Answer 2

jQuery Cycle易于设置，可以满足您的要求。

这是一个例子： http ： //jsfiddle.net/n1ck/4PvU7/

 $('.boxes').cycle({ speed: 1000, // speed of the transition timeout: 5000 // milliseconds between slide transitions (0 to disable auto advance) }); 

Answer 3

http://jsfiddle.net/Bouillou/UQTY2/52/

 
 
text1
 
text2
 
text3
 
 jQuery.fn.nextOrFirst = function (selector) { var next = this.next(selector); return (next.length) ? next : this.prevAll(selector).last(); } $(document).ready(function () { $('div.fade-effect').fadeOut(500); var fadeInTime = 1000; var intervaltime = 5000; //First call setTimeout(function () { fadeMe($('div.fade-effect').first()); }, intervaltime); function fadeMe(div) { div.fadeIn(fadeInTime, function () { div.fadeOut(fadeInTime); //Recursive call setTimeout(function () { fadeMe(div.nextOrFirst()); }, intervaltime); }); } }); 

Answer 4

         
 
text1
 
text2
 
text3
 
   

Answer 5

这是最简单的解决方案之一：

CSS：

 .boxes { position:relative; height:332px; width:500px; } .boxes div { position:absolute; left:0; top:0; } 

jQuery的：

 $('.boxes div:gt(0)').hide(); setInterval(function(){ $('.boxes :first-child').fadeOut().next('div').fadeIn().end().appendTo('.boxes'); }, 3000); 

工作演示