javascript - 如何制作响应式图像？

Question

我有一个简单的响应式图像 slider ，它几乎可以正常工作，但问题是当图像从一个图像更改为另一个图像时，有一个很大的跳跃，我想解决这个问题。请查看代码。并帮助我。谢谢。

$("#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:relative父级中position:absolute您的LI元素。

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>