Question

我正在研究一些jquery，其中我有一个幻灯片显示不同的图像淡入淡出。

问题是在幻灯片放映div中我有另一个孩子div，我不想淡入淡出。

我试图让下面的jfiddle中的措辞“test”继续保持，而下面的图像逐渐消失。如果我可以让它工作，那么我可以适应我的网站。

至关重要的是，只有父div才会淡入和淡出而不是子div。

Jfiddle so far: 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

Answer 1

由于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具有位置：绝对值和z-index：2表示良好度量

Answer 2

您可以执行以下操作：

<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;
}

将子文本定位为绝对，并使其居中。希望这可以帮助。

Jquery只对幻灯片放映的父div

2 个答案: