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 将始终使子 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 回答
0

你可以这样做：

<div id="parent">
  <div id='slideshow'></div>
  <div id="childText">testtest</div>
</div>

并添加css，如：

#slideshow {
    width: 100%;
    position: relative;
    height: 300px;
}
#childText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 10px;
}
#parent {
  position: relative;
}

这是定位子文本绝对并将其保持在中心。希望这可以帮助。

于 2018-11-08T03:43:05.783 回答