簡單的碎片滑塊在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