0

私はいくつかのjqueryに取り組んでおり、さまざまな画像のスライドショーがフェードインおよびフェードアウトしています。

問題は、スライド ショーの div 内に別の子 div があり、フェードインおよびフェードアウトしたくないことです。

下の画像がフェードインおよびフェードアウトしている間、下のjfiddleで「テスト」という文言を維持しようとしています。それを機能させることができれば、それを自分のウェブサイトに適応させることができます。

親 div のみがフェード インおよびフェード アウトし、子 div はフェード アウトしないことが重要です。

これまでのJfiddle: http://jsfiddle.net/4TZ29/12/

#slideshow {
    width: 100%;
    position: relative;
    height: 500px;
}

<div id='slideshow'><div>testtest</div></div>


var imgArray = ['http://upload.wikimedia.org/wikipedia/en/5/59/500_x_300_Ramosmania_rodriguesii_(Rubiaceae).jpg', 
                 'http://upload.wikimedia.org/wikipedia/commons/5/5c/New-Withrow-Gym-500-X-300.jpg', 
                 'http://inspirationfeed.com/wp-content/uploads/2010/10/22551-500x300.jpg', 
                 'http://inspirationfeed.com/wp-content/uploads/2010/12/11619912483527701-500x300.jpg', 
                 'http://westernstatescat.com/system/images/BAhbBlsHOgZmIigyMDExLzEyLzIwLzA5LzAwLzMzLzgwNi81MDB4MzAwLmpwZw/500x300.jpg'
               ]
var nextBG = "url(" + imgArray[Math.floor(Math.random() * imgArray.length)] + ") no-repeat bottom center";
$('#slideshow').css("background", nextBG);              

setInterval(function(){
    nextBG = "url(" + imgArray[Math.floor(Math.random() * imgArray.length)] + ") no-repeat bottom center";
    $('#slideshow').fadeOut('slow', function() { 
        $(this).css("background", nextBG).fadeIn('slow'); })                   
}, 3000); // 3 second interval
4

2 に答える 2

0

DOM の仕組みにより、親 div は常に子をフェードアウトします。js を介して制御される絶対配置がうまくいく場合があります。例えば：

function positionText () {
    var x = $('#text-div').height(),
    y = $('#text-div').width(),
    z = $('#slide-container').offset().top,
    i = $('#slide-container').offset().left,
    h = $('#slide-container').height(),
    w = $('#slide-container').width();
    $('#text-div').css({top: z + ( (h / 2) - (x / 2) ), left: i + ( (w / 2) - (y / 2) )});
}

スライド コンテナの幅が変わるたびに positionText() を呼び出します。

#text-div に position:absolute と z-index:2 があることを確認してください。

于 2013-11-06T20:43:52.740 に答える