0

css の同じ位置に配置された div の 3 つの異なるコンテンツがあります。

<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

This could be an example:

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 に答える