如何获得最小的jQuery幻灯片正确滑动？ [英] How to get minimal jQuery slideshow to slide properly?

问题描述

尝试使用这个最小的jQuery幻灯片（使用animate（）简单的jQuery幻灯片演示 ），但是如何让第3张和第4张图片在第一张和第二张图片中一起滑动？

Trying to make this minimal jQuery slideshow (Simple jQuery slideshow using animate()), but how do I make the 3rd and 4th image slide "together" like in the 1st and 2nd image?

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

JS：

changeSlide（1，$（。slideshow img））;

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对这项工作来说太过分了）：

Ideally they should slide like in this Slick.js example (although I feel Slick is overkill for this job):

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

推荐答案

我已经改变了你的代码了很多： JSFidle

I have changed your code quite a bit: JSFidle

首先，应该执行 prevItem.css（right，prevItem.width（））; 而不是 prevItem.css（left，-prevItem.width（））; 。和CSS应该这样改变：
.slideshow img：first-child {
right：0px;
}

First of all, you should do prevItem.css("right", prevItem.width()); instead of prevItem.css("left", -prevItem.width());. And CSS should be changed like this: .slideshow img:first-child { right: 0px; }

我也将动画改为循环重复。 Dunno如果你可以使用它，否则这里是你要求的 http://jsfiddle.net/eku4Lwt1/56/

I have also changed the animation to circularly repeat. Dunno if you can use it, otherwise here is what you asked for http://jsfiddle.net/eku4Lwt1/56/

这篇关于如何获得最小的jQuery幻灯片正确滑动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！