如何創建一個簡單的jQuery圖像滑塊沒有絕對位置

Question

我正在尋找一種方法來創建一個非常簡單的圖像滑塊使用jQuery與動畫淡入淡出過渡。沒有按鈕，數字和圖例是必要的。

我發現這個very good example here - 和其他一些 - 但問題是，他們都需要圖像在「位置：絕對」，當我這樣做時，我的整個佈局崩潰。

有沒有什麼辦法可以做到這一點，而無需在圖像上使用絕對定位？

這是我使用的原代碼：

$(function(){ 
 
    $('.fadein img:gt(0)').hide(); 
 
    setInterval(function(){ 
 
     $('.fadein :first-child').fadeOut() 
 
     .next('img').fadeIn() 
 
     .end().appendTo('.fadein');}, 
 
     3000); 
 
});

.fadein { position:relative; width:500px; height:332px; } 
 
.fadein img { position:absolute; left:0; top:0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fadein"> 
 
    <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"> 
 
    <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"> 
 
    <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"> 
 
</div>

我真的不知道，當我用位置，爲什麼我的佈局崩潰：絕對上的圖像。請參見下面的圖像，由於圖像是位置：絕對應該被定位在圖像下方的文本是在圖像的位置：

我發現解決這個是動態設置的div高度的方式根據形象的高度，但我知道這並不優雅。仍然接受任何想法或意見。謝謝！

function adjustScreenSize() { 
 
    var img = document.getElementById('imgslide'); 
 
    var height = img.clientHeight; 
 
    document.getElementById('slideshow').style.height = height + "px"; 
 
} 
 

 
$(document).ready(function() { 
 
    adjustScreenSize(); 
 
}); 
 

 
$(window).resize(function() { 
 
    adjustScreenSize(); 
 
});

#slideshow { 
 
\t position: relative; 
 
\t width: 100%; 
 
} 
 

 
#slideshow img { 
 
\t left: 50%; 
 
\t top: 0; 
 
\t width: 80%; 
 
\t margin-left: -40%; 
 
\t height: auto; 
 
\t position: absolute; 
 
}

<div class="row text-center"> 
 

 
    <div class="col-md-12"> 
 

 
    <div class="top-buffer-lg bottom-buffer-md blue"> 
 
     <h1>All you need to know in one single place</h1> 
 
     <span>A well designed product to help you keep track of SaaS and subscription metrics</span> 
 
    </div> 
 

 
    <!-- ** SCREEN SHOTS ** --> 
 
    <div id="slideshow"> 
 
     <img id="imgslide" src="img/saasmetrics-screen-01.png" /> 
 
     <img src="img/saasmetrics-screen-02.png" /> 
 
     <img src="img/saasmetrics-screen-03.png" /> 
 
     <img src="img/saasmetrics-screen-04.png" /> 
 
    </div> 
 

 
    </div> 
 

 
</div><!--/row-->

Answer 1

您可以使用CSS想想供應商名稱或使用prefixfree

.fadein { 
 
    position:relative; 
 
    width:500px; 
 
    height:332px; 
 
    background-size: cover; 
 
    -webkit-animation: slider 6s infinite alternate 
 
} 
 
@-webkit-keyframes slider { 
 
    from{ 
 
    background: url(http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg) 
 
    } 
 
    50%{ 
 
    background: url(http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg) 
 
    } 
 
    to{ 
 
    background: url(http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg) 
 
    } 
 
}

<div class="fadein"></div>