如何制作响应式图像？

Question

我有一个简单的响应式图像滑块，它工作得很好，但问题是当图像从一个图像变为另一个图像时，有一个很大的跳跃，我想解决这个问题。拜托，看看代码。并帮助我。感谢。

$("#slideshow > li:gt(0)").hide();

$("#slideshow")
  .mouseenter(function() {
    if (timer) {
      clearInterval(timer)
    }
  })
  .mouseleave(function() {
    timer = setInterval(function() {
      $("#slideshow > li:first")
        .fadeOut(500)
        .next()
        .fadeIn(500)
        .end()
        .appendTo("#slideshow");
    }, 3000);
  })
  .mouseleave();

img {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>


<div>
  <ul id="slideshow">
    <li><img src="http://lorempixel.com/800/300" alt="" /></li>
    <li><img src="http://placehold.it/800x300" alt="" /></li>
    <li><img src="http://placekitten.com/800/300" alt="" /></li>
    <li><img src="http://placehold.it/800x300" alt="" /></li>
  </ul>
</div>

Answer 1

您可以position: absolute LI个父母内position: relative个元素。

var timer; /* P.S: forgot about this??? */

$("#slideshow > li:gt(0)").hide();

$("#slideshow")
  .mouseenter(function() {
    if (timer) {
      clearInterval(timer)
    }
  })
  .mouseleave(function() {
    timer = setInterval(function() {
      $("#slideshow > li:first")
        .fadeOut(500)
        .next()
        .fadeIn(500)
        .end()
        .appendTo("#slideshow");
    }, 3000);
  })
  .mouseleave();

* {margin: 0;}


#slideshow {
  position: relative;
  list-style: none;
  height: 300px;
}

#slideshow li {
  position: absolute;
  top: 0;
  left: 0;
}

#slideshow li img{
  width:100%;
  height:100%;
  object-fit: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>


<div>
  <ul id="slideshow">
    <li><img src="http://lorempixel.com/800/300" alt="" /></li>
    <li><img src="http://placehold.it/800x300" alt="" /></li>
    <li><img src="http://placekitten.com/800/300" alt="" /></li>
    <li><img src="http://placehold.it/800x300" alt="" /></li>
  </ul>
</div>

上面的代码是某人的想法我在SO上看到了很多，我完全不喜欢。修改DOM附加元素（无用重新布局/重新绘制）...定位非缓存元素......等等...

我的建议是简单地使用计数器和更好的方法

/* FADE GALLERY */
(function() {

  var $slides = $("#slideshow").find("li"),
    tot = $slides.length,
    c = 0,
    itv;

  function anim() {
    $slides.stop().fadeOut().eq(++c % tot).fadeIn();
  }

  function play() {
    itv = setInterval(anim, 3000);
  }

  function stop() {
    clearInterval(itv);
  }

  $("#slideshow").hover(stop, play).mouseout();

}());

#slideshow {
  position: relative;
  list-style: none;
  height: 300px;
  margin: 0;
}

#slideshow li {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
}

#slideshow li + li  { /* Hide using CSS to prevent flickering */
  display: none; 
}

#slideshow li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>


<div>
  <ul id="slideshow">
    <li><img src="http://placehold.it/800x300/0bf?text=0" alt=""></li>
    <li><img src="http://placehold.it/800x300/f0b?text=1" alt=""></li>
    <li><img src="http://placehold.it/800x300/ff0?text=2" alt=""></li>
    <li><img src="http://placehold.it/800x300/0fb?text=3" alt=""></li>
  </ul>
</div>