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

Question

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

我在這里找到了這個非常好的例子 - 以及其他幾個 - 但問題是它們都要求圖像處於“位置：絕對”狀態，當我這樣做時，我的整個布局都會崩潰。

有沒有辦法，我可以做到這一點，而不必在圖像上使用絕對定位？

這是我正在使用的原始代碼：

 $(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> 

當我在圖像上使用position：absolute時，我不確定為什么我的布局會崩潰。 請參見下圖，因為圖像是位置：絕對位於圖像下方的文本位於圖像上方：

我發現解決這個問題的方法是根據圖像高度動態設置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 { position: relative; width: 100%; } #slideshow img { left: 50%; top: 0; width: 80%; margin-left: -40%; height: auto; 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> 

Answer 2

 var i= -1;
       var images = [];
       images[0] = "fingers.jpg";
       images[1] = "tmrw.jpg";
       images[2] = "cycle.jpg";

    function changeImg(){
         time = 3000;            
        if(i < images.length - 1)
        {
          i++; 
        }
        else 
        { 
         i = 0;
        }
         setTimeout("changeImg()", time);
         document.slide.src = images[i];

    }     
    window.onload=changeImg;

       function prev()
        {
           i = i-1;
          if ( i < images.length )
          {
            if ( i == -1 )
            {
                i = 2;
            }
          }
          document.slide.src = images[i];
        }

        function next()
        {
          i = i +1;

         if ( i <= images.length  )
         {
            if ( i == images.length )
            {
                i = 0;
            }
         }
            document.slide.src = images[i];
        }