0

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

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

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

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

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

对不起一个新手问题。可以使用 jQuery。

4

4 回答 4

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;
}​
于 2012-08-07T12:00:59.703 回答
0

您需要使用 jquery 的fadeIn() 和fadeOut() 函数以及可以使用setTimeout() 或doTimeout() 的定时器函数的不同定时器函数

至于这个资源的相关链接，都给你回复。

于 2012-08-07T11:59:37.147 回答
0

这可能是一个例子：

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);
于 2012-08-07T12:04:53.483 回答
-1

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

使用类滑块将内容放在 div 中

 <div class="slider">abc</div>
 <div class="slider">def</div>
 <div class="slider">ghi</div>
于 2012-08-07T12:06:27.750 回答