如何使用javascript中心幻灯片图像?

时间:2017-08-25 12:02:27

标签: javascript jquery html css css3

我想编写自己的jQuery滑块,它显示下一个和上一个图像的一小部分(例如20px)。

为实现这一目标,我创建了一个简单的图像滑块,使用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();设置滑块动画时我完全失去了计算像素数量(以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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分: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();
    });

});

检查这个小提琴:jsFiddle