使用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