如何讓最小的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幻燈片正常滑動？

回答

相關問題