jquery中的简单碎片滑块答案

【问题标题】：Simple fragmented Slider in jqueryjquery中的简单碎片滑块
【发布时间】：2014-11-01 15:49:06
【问题描述】：

我找到了很多滑块和示例，但没有一个适合我的需要。

谁能帮我用 jquery 和 html 编写一个简单的滑块，就像图片中的那个滑块一样？单击箭头时，下一张/上一张图片将滑入/滑出。

提前致谢，马克

【问题讨论】：

【解决方案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-classes first, second and third 定义了图片的位置。这意味着它只适用于 3 张图片！不是一个好的解决方案

【讨论】：