使用 jQuery 淡入淡出图像

Question

您好，我正在尝试为主页上的横幅图像实现交叉淡入淡出效果。我正在使用 jQuery 进行此操作，并且褪色效果运行良好。 这是我的代码：

<script>
 function bannerImages(){
  var $active = $('.banner-test .banner_one');
  var $next = ($active.next().length > 0) ? $active.next() : 
 $('.banner-test img:first');
  $next.css('z-index',2);//move the next image up the pile
  $active.fadeOut(1500,function(){//fade out the top image
  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
      $next.css('z-index',3).addClass('active');//make the next image the top one
  });
}

  $(document).ready(function(){
    // run every 7s
   setInterval('cycleImages()', 7000);
  })
</script>

正如我所说，这工作正常，但是我遇到了一个问题。为了使它起作用，我需要将position:absolute 应用于.banner-test img 类。现在我还在.banner-test 类中添加了另一个div，用于在横幅图像顶部显示一些文本。 代码如下所示：

 <div class="banner-test">
        <img class="banner_one" src="../image.jpg" alt="" />
         <img src="../image2.jpg" alt=""/>

        <div id="text">
            <p class="text1">Sample Text</p>
        </div>
    </div>

还有 #text 的 css ：

 #text {
position:absolute; 
bottom:35px ;  
left:10px;  
width:70% ;   
background-color:#104E8B;  
font-size:1em;  
color:white;  
opacity:0.95; 
filter:alpha(opacity=95); /* IE transparency */  
}
.text1 {
padding:13px;  
margin:0px;  
}
.banner-test {
  display: block;
  position: relative;
}

因此，如果我对图像应用绝对定位，则会将布局与文本混淆（所有内容都被推到页面顶部）。 有人能想出一个解决方法吗？

编辑

https://jsfiddle.net/ztrez888/1/embedded/result/ 这是小提琴 - 如果绝对位置应用于.banner-test img，则文本消失

Answer 1

你说：（一切都被推到页面顶部）

这是因为您的包装元素 .banner-test 没有设置静态高度。因此，当您对其中的图像应用绝对位置时 .banner-test 会缩小到 #text .text1 的高度。

在css中设置一个高度：

.banner-test {
  display: block;
  position: relative;
  height:200px; /* <--put the height of img */
}

或用 jQuery 计算：

$(document).ready(function(){
    var arr = $('.banner-test img').map(function(){ // get the heights of imgs in array
                  return $(this).height();
             }).get(),
       h   = Math.max.apply(Math, arr); // find out the greatest height in it.

    $('.banner-test').css('height', h); // set the height here.
    // run every 7s
    setInterval('cycleImages()', 7000); // then cycle the images.
});

_{cycleImages() 在 setInterval 中被调用，并且页面上有 bannerImages() 函数。我假设你有这个cycleImages() 函数。}

---

更新：

  #text {
    position: absolute;
    bottom: 30px;
    left: 10px;
    width: 100px;
    background-color: #104E8B;
    font-size: 1em;
    color: white;
    opacity: 0.95;
    filter: alpha(opacity=95);
    /* IE transparency */
    z-index: 5;  /* <----change these here*/
    left: 10%;
    top: 0;
  }

Updated fiddle