如何让最小的 jQuery 幻灯片正确滑动？答案

【问题标题】：How to get minimal jQuery slideshow to slide properly?如何让最小的 jQuery 幻灯片正确滑动？
【发布时间】：2014-10-27 03:08:51
【问题描述】：

尝试制作这个最小的 jQuery 幻灯片 (Simple jQuery slideshow using animate())，但是如何让第三张和第四张图片像第一张和第二张图片一样“一起”滑动？

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/

【问题讨论】：

我在你的第一个 jsfiddle 中没有看到任何“滑动”？
抱歉，忘记加-moz-transition，请立即尝试。
对我来说工作正常，有什么问题？
@IrvinDominin 第一张和第二张图片效果很好。 3号和4号都乱了。你是我发布的第一个小提琴吗？

标签： javascript jquery css

【解决方案1】：

这个怎么样：http://jsfiddle.net/eku4Lwt1/64/

在你的 JS 中更改这一行：

currentItem.css("right", 0);

currentItem.css("left", 0);

并在您的 CSS 中将图像定位更改为 left: 200px;：

.slideshow img {
    position: absolute;
    top: 0;
    left: 200px;
}

【讨论】：

再次感谢！尽管这实际上是您的代码，但必须将其交给 Semyon，尽管他首先回答。
Henri 和我的解决方案不同，因为我使用的是右偏移，而 Henri 使用的是左偏移。这两个偏移量不应同时使用。
您好！请参阅stackoverflow.com/questions/28205299/… -- 尝试稍微改进一下这个滑块..

【解决方案2】：

我已经对你的代码做了很多修改：JSFidle

首先，您应该使用prevItem.css("right", prevItem.width()); 而不是prevItem.css("left", -prevItem.width());。并且 CSS 应该像这样更改： .slideshow img:first-child { right: 0px; }

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

【讨论】：

问候 Semyon 并感谢您的建议！有没有可能让它变成非圆形的？还要让幻灯片像 Slides.js 示例中那样实际滑动吗？另外，如果您想知道，此代码最初是在 stackoverflow.com/questions/25396899/… 中制作的。
请查看第二个链接，该链接发布在我的回答末尾。 jsfiddle.net/eku4Lwt1/56