Question

我有3个不同的div内容放在css的相同位置。

<div class="sidebanner_01">
abc
</div>

<div class="sidebanner_02">
def
</div>

<div class="sidebanner_03">
ghi
</div>

我需要他们不断改变（彼此之间可能会褪色？）。

抱歉新手问题。可以使用jQuery。

Answer 1

这是一个 非常基本的 小提琴，可以做你想要的。请注意，插件功能要强得多，但如果您需要 非常基本的 系统，则应该这样做。

http://jsfiddle.net/r9ngh/2/

var slideShowDivs = ['.sidebanner_01', '.sidebanner_02', '.sidebanner_03'];
var currentID = 0;
var slideShowTimeout = 1000;
$(document).ready(function() {
    for (var i = 1; i < slideShowDivs.length; i++) $(slideShowDivs[i]).hide();
    setTimeout(slideShowChange, slideShowTimeout);
});
function slideShowChange() {
    var nextID = currentID + 1;
    if (nextID >= slideShowDivs.length) nextID = 0;
    $(slideShowDivs[currentID]).stop(true).fadeOut(400);
    $(slideShowDivs[nextID]).stop(true).fadeIn(400, function() {
        setTimeout(slideShowChange, slideShowTimeout);
    });
    currentID = nextID;
}

Answer 2

您需要使用jquery的fadeIn（）和fadeOut（）函数以及用于计时器函数的不同计时器函数，您可以使用setTimeout（）或doTimeout（）

至于此资源的相关链接，所有内容都会回复给您。

Answer 3

这可能就是一个例子：

function slide(){

$('div[class^=sidebanner_]').each(function(i,e){

    var op = $(e).css('opacity') == 0 ? 1 : 0;   
    $(e).animate({'opacity': op}, 1000 * i);

});

}

setInterval(slide, 3000);

Answer 4

演示 - 平滑淡入和淡出过渡：http://jsfiddle.net/gmefu/3/

使用类滑块

将内容放在div中

 <div class="slider">abc</div>
 <div class="slider">def</div>
 <div class="slider">ghi</div>

循环3个div

4 个答案: