使用animate()的简单jQuery幻灯片 [英] Simple jQuery slideshow using animate()

问题描述

使用jQuery的animate()，如何滑动每个图像一次(使用 Slick.js - CSS动画)，然后停在最后一个?

Using jQuery's animate(), how do I slide each image once (with Slick.js-like CSS animations) and then stop at the last one?

<div class="slideshow" style="height: 100px; width: 200px; overflow: hidden;">
    <img src="http://lorempixel.com/200/100" />
    <img src="http://lorempixel.com/200/101" />
    <img src="http://lorempixel.com/200/102" />
</div>

这显然行不通，但是:

var slide = $('.slideshow img'),
  delay = 500;

slide.each(function () {
    setTimeout(function () {
        $(this).animate({
            right: slide.width()
        });
    }, delay);
});

在这里，我正在使用Slick，但是我觉得这对我想做的事情有点过分了:

Here I'm using Slick, but I feel it's a bit overkill for what I'm trying to do:

http://jsfiddle.net/frank_o/eku4Lwt1/2/

$('.slideshow').slick({
    slide: 'img',
    autoplay: true,
    autoplaySpeed: 3000,
    accessibility: false,
    arrows: false,
    infinite: false,
    pauseonhover: false,
    responsive: false,
    swipe: false,
    touchmove: false,
}); 

推荐答案

您可以(并且应该)使用CSS制作实际的动画.由于硬件加速，因此它比jQuery动画更有效.

You can (and should) do the actual animation with CSS. It is more efficient than jQuery animation since it's hardware accelerated.

JS:

changeSlide(1, $(".slideshow img"));
function changeSlide(i, items) {
    setTimeout(
      function() 
      {
          var currentItem = items.eq(i);
          var prevItem = items.eq(i-1);
          prevItem.css("left", -prevItem.width());
          currentItem.css("left", 0);
          if(i < items.size()-1)
              changeSlide(i+1, items);
      }, 3000);    
}

CSS:

.slideshow {
    position: relative;
}
.slideshow img {
    position: absolute;
    top: 0;
    left: -200px;
    width: 200px;
    height: 100px;
    -webkit-transition: all 0.6s ease;                  
    -moz-transition: all 0.6s ease;                 
    -o-transition: all 0.6s ease;   
    -ms-transition: all 0.6s ease;          
    transition: all 0.6s ease;
}
.slideshow img:first-child {
    left: 0px;
}

请注意，我是从索引#1开始的，因为不需要为第一个图像制作动画.

Notice that I started with index #1 because there's no need to animate the first image.

这是JS&的演示. CSS: http://jsfiddle.net/eku4Lwt1/35/

Here is a demo with JS & CSS: http://jsfiddle.net/eku4Lwt1/35/

这篇关于使用animate()的简单jQuery幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！