时间戳

首页 > 解决方案 > 基本 JavaScript 幻灯片说明

javascript - 基本 JavaScript 幻灯片说明

问题描述

我正在使用 JQuery 创建自定义幻灯片布局，并且正在编写将

  1. 计算屏幕宽度
  2. 减去图像的宽度
  3. 将左边距设置为屏幕和图像宽度差的 1/3

图像似乎排成一行，但在 3 张图像中的最后一张被砍掉了。我正在尝试使这种动态化，以便它可以为任意数量的图像进行间隔布局。我对这一切都错了吗？此外，内联块元素之间的空间是否设置它？

var sl = $('.slideIt')
var acc = 0
for (var i = 0; i < $('.slideIt img').length; i++) {
  acc += $('.slideIt').eq(i).width();
}
var distanceRatio = ($(window).innerWidth() - acc) / sl.children().length;

$('.slideIt').css('marginLeft', '' + distanceRatio + 'px')
.imageSlideHolder {
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slideIt {
  display: inline-block;
  position: relative;
  width: 33%;
}

.slideIt img {
  position: relative;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Image Slideshow</h1>

<div class='imageSlideHolder'>
  <div class='slideIt'>
    <img src='im1.jpg' />
  </div>
  <div class='slideIt'>
    <img src='im2.jpg' />
  </div>
  <div class='slideIt'>
    <img src='im3.jpg' />
  </div>
</div>

标签： javascriptjqueryhtmlcssslideshow

解决方案

您不必计算任何东西的宽度。通过使用 CSS，您可以使用 Flexbox 将项目排成一行。将所有幻灯片包裹在另一个元素中，在本例中，我们称之为元素imageSlideRails，它将所有幻灯片一起移动，而不是单独移动它们。

我建议使用 CSStransform属性而不是边距来使滑块移动。这将提高性能并防止不必要的行为，例如元素相互推开。

您滑动的量可以是与幻灯片上的值相同的flex-basis值。假设幻灯片是33.3%. 如果将导轨移动到-33.3%，则第一张幻灯片将移出视野，而下一张幻灯片将进入视野。这样计算将始终精确。

查看下面的代码段。

var index = 1;
var slideWidth = 33.3;
var slidesLength = $('.slideIt').length;
var $rails = $('.imageSlideRails');

setInterval(function() {
  $rails.css('transform', `translate3d(${index * -slideWidth}%, 0, 0)`);
  if (index === slidesLength - 1) {
    index = 0;
  } else {
    index++;
  }
}, 2000);
.imageSlideHolder {
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.imageSlideRails {
  display: flex;
  flex-flow: row nowrap;
  transition: transform 1s ease-in-out;
}

.slideIt {
  box-sizing: border-box;
  position: relative;
  width: 33.3%;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3%;
  padding: 15px;
  overflow: hidden;
}

.slideIt img {
  position: relative;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Image Slideshow</h1>

<div class='imageSlideHolder'>
  <div class="imageSlideRails">
    <div class='slideIt'>
      <img src='https://www.fillmurray.com/640/360' />
    </div>
    <div class='slideIt'>
      <img src='https://www.fillmurray.com/640/360' />
    </div>
    <div class='slideIt'>
      <img src='https://www.fillmurray.com/640/360' />
    </div>
    <div class='slideIt'>
      <img src='https://www.fillmurray.com/640/360' />
    </div>
    <div class='slideIt'>
      <img src='https://www.fillmurray.com/640/360' />
    </div>
  </div>
</div>

推荐阅读