javascript - jQuery 图像幻灯片 - 最后一张幻灯片出现时没有移动

Question

我在 jQuery 中创建了一个简单的图像 slider ，滑动工作正常我尝试做两件事:

1. 我想使用 transform:translate3d 而不是 margin-left(在滑动中)，所以它具有平滑度

2. 第三张幻灯片完成后，第一张幻灯片没有滑动动画(出现卡顿)

有人可以给我一些想法吗？

这里是 working JSfiddle demo

'use strict';
$(document).ready(function() {

  var winw = $(window).width();
  var winh = $(window).height();

  // variables
  var width = $(window).width();
  var timeFrame = 4000;
  var pause = 8000;
  var currentSlide = 1;

  // cache dom
  var $slider = $('#slider');
  var $slideContainer = $('.slides', $slider);
  var $slides = $('.slide', $slider);
  var interval;

  // functions
  function startSlider() {
    interval = setInterval(function() {
      //translate3d(x, y, z)
      $slideContainer.animate({
        'margin-left': '-=' + width
      }, timeFrame, function() {

        if (++currentSlide === $slides.length) {
          currentSlide = 1;
          $slideContainer.css('margin-left', 0);
        }
      });
    }, pause);
  }

  function pauseSlider() {
    clearInterval(interval);
  }

  // call functions
  //$slideContainer.on('mouseenter', pauseSlider).on('mouseleave', startSlider);
  startSlider();

  $("#slider .slide").height(winh);
  $("#slider .slide").width(winw);
});

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
  background: #eee;
  overflow: hidden;
}

#slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#slider .slides {
  display: block;
  width: 10000px;
  margin: 0;
  padding: 0;
}

#slider .slide {
  float: left;
  list-style-type: none;
  width: 1050px;
}

.slide1 {
  background: url(imgs/slide-image-1.jpg) no-repeat center;
}

.slide2 {
  background: url(imgs/slide-image-2.jpg)no-repeat center;
}

.slide3 {
  background: url(imgs/slide-image-3.jpg)no-repeat center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
  <ul class="slides">
    <li class="slide slide1"></li>
    <li class="slide slide2"></li>
    <li class="slide slide3"></li>
  </ul>
</div>

Answer 1

您需要更新startSlider 函数并且需要使用animate 更改margin-left。

   function startSlider() {
        interval = setInterval(function() {
            //translate3d(x, y, z)
            $slideContainer.animate({'margin-left': '-='+width}, timeFrame, function() {
                if (++currentSlide === $slides.length) {
                     currentSlide = 1;
                     //$slideContainer.css('margin-left', 0);
                     $slideContainer.animate({'margin-left': '0'});
                }
            });
        }, pause);
    }

Fiddle