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

使用jQuery交叉淡入淡出图像

1 个答案:

更新

Updated fiddle