如何让最小的jQuery幻灯片正常滑动？

试图做出这个最小的jQuery幻灯片（Simple jQuery slideshow using animate()），但我如何使第三和第四张图像像第一张和第二张图片一样滑动？如何让最小的jQuery幻灯片正常滑动？

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

JS：

changeSlide（1，$（ “幻灯片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例如像滑动（虽然我觉得斯利克是矫枉过正此作业）：

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

来源

2014-09-02 Mark Boulder

我没有看到任何“滑动”在你的第一个jsfiddle？ – Sharky 2014-09-02 19:02:20

对不起，忘了添加'-moz-transition'，请现在就试试。 – 2014-09-02 19:24:20

对我来说工作正常，问题是什么？ – 2014-09-02 20:31:07

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

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

我也改变了动画循环重复。说不上来，如果你可以使用它，否则，这里是你问什么http://jsfiddle.net/eku4Lwt1/56/

来源

2014-09-02 21:46:37

问候谢苗，谢谢你的建议！有可能使它成为非圆形的吗？而且幻灯片实际上也像Slides.js例子那样滑动？此外，你想知道，这个代码是在http://stackoverflow.com/questions/25396899/simple-jquery-slideshow-using-animate首先制作的。 – 2014-09-02 22:19:28

请参阅第二个链接，该链接发布在我的回答结尾。 http://jsfiddle.net/eku4Lwt1/56/ – 2014-09-03 05:50:19

真棒 - 感谢很多人！ – 2014-09-03 09:39:05

如何：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; 
}

来源

2014-09-03 06:41:22

再次感谢！尽管这实际上是你的代码，但必须先给Semyon提供这个。 – 2014-09-03 09:40:04

亨利和我的解决方案是不同的，因为我正在使用右偏移，而亨利正在使用左。这两个偏移量不应该同时使用。 – 2014-09-03 10:38:10

问候！请参阅http://stackoverflow.com/questions/28205299/making-minimal-js-css-slideshow-responsive-试图改善这个滑块一点.. – 2015-01-29 00:58:50

如何让最小的jQuery幻灯片正常滑动？

回答

相关问题