多个div之间自动淡入/显示
什么是我可以在我的网页上加载的简单jQuery脚本，它将在三个“盒子”div中的每一个之间自动淡出，并重复？ 我希望它显示一个div 5秒，同时隐藏其他两个，然后运行1秒淡入淡出过渡到下一个。
这三个div目前堆叠在一起。
text1 text2 text3 你可以试试这个：
$(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/
我确信它可以清理和/或更有效率，但我只是把它放在一起让它工作。
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) });
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); }); } });
text1 text2 text3
这是最简单的解决方案之一：
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);
工作演示