Question

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

而不是margin-left（滑动）我想使用transform:translate3d所以它具有平滑性
第三张幻灯片完成后，第一张幻灯片放映时没有滑动动画（出现混蛋）

有人可以就此提出想法吗？

'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功能，需要使用margin-left更改animate。

   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

jQuery图像幻灯片 - 最后一张幻灯片无法移动

1 个答案: