javascript - 如何使用 javascript 将幻灯片图像居中？

Question

我想编写自己的 jQuery slider ，它显示下一张和上一张图像的一小部分(例如 20px)。

为此，我创建了一个简单的图像 slider ，使用 float: left; 将所有图像排列在 overflow: hidden div 中的一行中。

我所有的图片都有 200px 的固定宽度。因此，我使用以下 sass 计算每张图像的边距:

img {
    float: left;
    display: block;
    margin: 0 calc((100vw - 200px) / 4 - 20px);

    &:first-child {
      margin-left: calc((100vw - 200px) / 2);
    }

    &:last-child {
      margin-right: calc((100vw - 200px) / 2);
    }
}

这非常有效，并且可以按应有的位置放置每张图片。

在尝试使用 transform: translateX(); 为 slider 设置动画时，我完全无法计算像素数量(以 vw/%/px 为单位)我需要将 $( '#slider').

如何计算 translateX 值以滑动到每个图像居中？

$(document).ready(function(){
  
  document.getElementById('slider').ondragstart = function() { return false; };
  
  var slider = $('#slider'),
      images = slider.find('img'),
      imageCount = images.length,
      currentIndex = 0;
  
  slider.width( imageCount * 100 + "vw");
  
  var slideLeft = function () {
    if ( currentIndex >= imageCount - 1 ) {
      console.log("Last image reached");
      return;
    }
    currentIndex += 1;
    console.log("Slide left");
    
    slider.css("transform", "translateX(" + currentIndex * -10 + "vw)");
  }
  
  var slideRight = function () {
    if ( currentIndex === 0 ) {
      console.log("First image reached");
      return;
    }
    currentIndex -= 1;
    console.log("Slide right");
    slider.css("transform", "translateX(" + currentIndex * -10 + "vw)");
  }
  
  $('#right').on('click', function(){
    slideLeft();
  });
  
  $('#left').on('click', function(){
    slideRight();
  });
});

html, body {
  margin: 0;
  padding: 0;
}

#slider-container {
  overflow: hidden;
  height: 300px;
  background: rgba(0, 0, 0, 0.05);
  margin: 5vw 0;
  width: 100vw;
}

#slider {
  height: 300px;
  transition: transform .3s ease-in-out;
  transform: translateX(0);
}
#slider img {
  float: left;
  display: block;
  margin: 0 calc((100vw - 200px) / 4 - 20px);
}
#slider img:first-child {
  margin-left: calc((100vw - 200px) / 2);
}
#slider img:last-child {
  margin-right: calc((100vw - 200px) / 2);
}

#controls {
  position: relative;
  width: 100vw;
  display: block;
  height: calc(10vw + 100px);
}
#controls .arrow {
  display: block;
  width: 100px;
  top: 5vw;
  background: lightgray;
  height: 100px;
  left: 5vw;
  position: absolute;
  font-size: 100px;
  line-height: 80px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
#controls .arrow:hover {
  background: lightblue;
}
#controls #right {
  left: auto;
  right: 5vw;
}

p {
  margin: 0 5vw 5vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider-container">
  <div id="slider">
    <img src="https://unsplash.it/200/300?image=1077" alt="img-1">
    <img src="https://unsplash.it/200/300?image=1076" alt="img-2">
    <img src="https://unsplash.it/200/300?image=1072" alt="img-3">
    <img src="https://unsplash.it/200/300?image=1063" alt="img-4">
    <img src="https://unsplash.it/200/300?image=1061" alt="img-5">
  </div>
</div>
<div id="controls">
  <div id="left" class="arrow">‹</div>
  <div id="right" class="arrow">›</div>
</div>
<p>Currently every scroll click scrolls a random amount to the left or right. This needs to be fixed, so that every image is centered after the slide.</p>

Answer 1

我对您的脚本进行了一些更新。

试试这个脚本

 $(document).ready(function(){
    document.getElementById('slider').ondragstart = function() { return false; };

    var slider = $('#slider'),
        images = slider.find('img'),
        imageCount = images.length,
        currentIndex = 0;

    slider.width( imageCount * 100 + "vw");

    var $this = $("#slider-container");
    var offset = $this.offset();
    var width = $this.width();

    var centerX = (offset.left + width / 2 ) + (images.width() / 2) - 40;

    var slideLeft = function () {
        if ( currentIndex >= imageCount - 1 ) {
            console.log("Last image reached");
            return;
        }
        currentIndex += 1;
        console.log("Slide left");

        slider.css("transform", "translateX(-" + (currentIndex * centerX) + "px)");
    }

    var slideRight = function () {
        if ( currentIndex === 0 ) {
            console.log("First image reached");
            return;
        }
        currentIndex -= 1;
        console.log("Slide right");
        slider.css("transform", "translateX(-" + (currentIndex * centerX) + "px)");
    }

    $('#right').on('click', function(){
        slideLeft();
    });

    $('#left').on('click', function(){
        slideRight();
    });

});

检查这个 fiddle :jsFiddle