javascript - 如何让最小的 jQuery 幻灯片正确滑动？

Question

试图制作这个最小的 jQuery 幻灯片(Simple jQuery slideshow using animate())，但是如何使第 3 和第 4 个图像像第 1 个和第 2 个图像一样“一起”滑动？

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

JS:

changeSlide(1, $(".slideshow img"));

function changeSlide(i, items) {
    setTimeout(
      function() 
      {
          var currentItem = items.eq(i),
            prevItem = items.eq(i-1);

          prevItem.css("left", -prevItem.width());
          currentItem.css("right", 0);

          changeSlide(i+1, items);
      }, 2000);    
}

HTML:

<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>

CSS:

.slideshow {
    background: white;
    position: relative;
}
.slideshow img {
    position: absolute;
    top: 0;
    right: -200px;
    width: 200px;
    height: 100px;
    -webkit-transition: all 2s ease;                  
}
.slideshow img:first-child {
    left: 0;
}

理想情况下，它们应该像这样滑动 Slick.js示例(虽然我觉得 Slick 对这项工作来说太过分了):

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

Answer 1

我对你的代码做了很多改动:JSFidle

首先，你应该做 prevItem.css("right", prevItem.width()); 而不是 prevItem.css("left", -prevItem.width( ));。 CSS 应该这样改变:.slideshow img:first-child {
右:0px；
}

我也将动画更改为循环重复。不知道你是否可以使用它，否则这就是你要的 http://jsfiddle.net/eku4Lwt1/56/