如何创建一个没有绝对位置的简单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>

当我在图像上使用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];
        }