简单的碎片滑块在jquery

Question

我发现了很多滑块和例子，但没有一个符合我的需求。

任何人都可以帮助我编写一个简单的滑块，像图片中的jQuery和HTML？ 当您点击箭头时，下一张/上一张照片将滑入/滑出。

由于提前， 马克

Answer 1

好的。这是我得到了什么，如果有人有兴趣。也许有人还可以改进它：

$(function() { 
var container = $('#slides'); 
var numImages = 3; 
var url = '/image/slide'; 
for (i = 1; i < numImages + 1; i++) { 
    container.append('<img src=' + url + +i + '.png class="sliderImage">'); 
} 
var slides = $('#slides > img'); 

$(slides[0]).addClass("first"); 
$(slides[1]).addClass("second"); 
$(slides[2]).addClass("third"); 

$("#arrowR").click(function() { 
    var el1=$(".first"); 
    var el2=$(".second"); 
    var el3=$(".third"); 
    el3.toggleClass("third first"); 
    el2.toggleClass("second third"); 
    el1.toggleClass("first second"); 


}); 
$("#arrowL").click(function() { 
    var el1=$(".first"); 
    var el2=$(".second"); 
    var el3=$(".third"); 

    el1.toggleClass("first third"); 
    el2.toggleClass("second first"); 
    el3.toggleClass("third second"); 
}); 
} 
); 

CSS类第一，第二和第三个定义图像的位置。这意味着它只适用于3张图片！ NOT A GOOD SOLUTION