javascript - 如何使用浏览器大小缩放 Javascript 幻灯片

Question

所以我用 Javascript/jQuery 完成了这个小型自动幻灯片放映。它工作得很好但是我不知道如何用屏幕尺寸缩放它，让它变成液体。目前针对 1920x1080 进行了优化。

我曾尝试将此值 (document.body.style.width) 分配给 width 变量，但没有成功，尝试使用图像的百分比而不是像素，还尝试使用非常 hackish 的媒体查询修复，但没有成功有用。

如果有人知道我如何完成此操作，请告诉我(同样，我需要它随浏览器窗口缩放)，无论如何，这是代码:

  <div class="slider">
    <ul class="slides">
      <li class="slide"><img src="index/showcase.png" alt="#"/></li>
      <li class="slide"><img src="index/pic4.png" alt="#"/></li>
      <li class="slide"><img src="index/pic3.png" alt="#"/></li>
      <li class="slide"><img src="index/pic5.png" alt="#"/></li>
      <li class="slide"><img src="index/pic6.png" alt="#"/></li>
    </ul>
  </div>

   .slider {
   width: 1920px;
   height: 780px;
   overflow: hidden;
   }

  .slider .slides {
  display: block;
  width: 9600px;
  height: 780px;
  margin: 0;
  padding: 0;
  }

.slider .slide {
 float: left;
 list-style-type: none;
 width: 1920px;
 height: 780px;
 }




    <script type="text/javascript">
       var myInterval = setInterval(function() {
       console.log(new Date());
       }, 1000);
        </script>

    <script type="text/javascript">
     $(function() {

    //configuration
    var width = 1920;
    var animationSpeed = 1000;
    var pause = 4000;
    var currentSlide = 1;

    //cache DOM
    var $slider = $('.slider');
    var $slideContainer = $slider.find('.slides');
    var $slides = $slideContainer.find('.slide');

    var interval;

    function startSlider() {
      interval = setInterval(function() {
        $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, 
    function(){
          currentSlide++;
          if (currentSlide === $slides.length) {
            currentSlide = 1;
            $slideContainer.css('margin-left', 0);
         }
      });
    }, pause);
  }        
  // function stopSlider() {
  //   clearInterval(interval);
  //}

  //$slider.on('mouseenter', startSlider).on('mouseleave', startSlider);

  startSlider();
});
</script>

Answer 1

vw 和 vh 可能就是你想要的。而不是 width: 20% 或 width: 550px，你做 width: 100vw 是视口(viewport)宽度的 100%(vh 是视口(viewport)高度)。然后它应该随着视口(viewport)调整大小而调整。