javascript - 如何创建一个没有绝对位置的简单 jQuery 图像 slider

Question

我正在寻找一种使用带有动画淡入淡出过渡的 jQuery 创建非常简单的图像 slider 的方法。不需要按钮、数字或图例。

我找到了这个 very good example here -- 和其他一些 -- 但问题是它们都要求图像位于“position:absolute”，当我这样做时，我的整个布局都崩溃了。

有什么办法可以不用在图像上使用绝对定位吗？

这是我使用的原始代码:

$(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 时，我不太确定为什么我的布局会崩溃。请参见下图，因为图像是 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 考虑 vendor 前缀或使用 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>