基本 JavaScript 幻灯片的说明

Question

我正在使用 JQuery 创建自定义幻灯片布局，我正在编写代码

计算屏幕的宽度
减去图像的宽度
将左边距设置为屏幕宽度与图片宽度之差的 1/3

这些图像似乎排成一行，但 3 张图像中的最后一张被砍掉了。我正在尝试使其动态化，以便它可以为任意数量的图像制作 spaced-out 布局。我这样做是不是错了？此外，内联块元素之间的 space 是否将其关闭？

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>

Answer 1

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

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

您滑动的数量可以与幻灯片上的 flex-basis 值相同。假设一张幻灯片是 33.3%。如果将 rails 移动到 -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>

基本 JavaScript 幻灯片的说明

Explanation for basic JavaScript slideshow

html

javascript

css

jquery

slideshow