Jquery 包含3张幻灯片的内容滑块

我正在使用jQuery创建自定义内容滑块。请参阅小提琴，以了解工作示例。在这个例子中，我只有两张幻灯片。当单击绿色按钮时，幻灯片将转到下一个按钮

我想添加更多的幻灯片，并有按钮点击幻灯片到其中每一个（没有以前的按钮）。当前jQuery函数具有硬编码的下一个div的

id

。现在，当我添加更多幻灯片时，这种方法将不会有效。我不知道如何编写一个函数来表示，检测当前的div，然后单击next，转到下一个。我怎样才能做到这一点

多谢各位

我已经把代码贴在下面了

HTML

<div id="main-slider-space">
    <div class="slider-wrapper">

        <div id="slide1" class="main-slide">

        </div><!-- end of slide1 -->   

        <div id="slide2" class="main-slide">

        </div><!-- end of slide2 -->   

    </div> <!-- end of slider-wrapper -->   
</div><!-- end of main-slider-space -->

<div id="main-slider-next" class="slider-buttons"><a class="active" href="#"></a></div>

jQuery

function goto(id, t){
    $(".slider-wrapper").animate({"left": -($(id).position().left)}, 600);
}

$(document).ready(function(e) {
   $('#main-slider-next').click(function(e) {
        e.preventDefault();
        goto('#slide2', this);
        return false;
    }); 
});

---

我会使用css制作动画，以下是我在您的中所做的更改：

.main-slide {
    position:absolute;
    width:600px;
    height:100%;

    -webkit-transition:left 0.5s linear;
    -moz-transition:left 0.5s linear;
    -o-transition:left 0.5s linear;
    transition:left 0.5s linear;
}

.main-slide:not(.current){
    left:600px;
}

.main-slide.current{
    left:0px;
}

然后在单击处理程序中，只需更改当前元素的类：

$(document).ready(function(e) {
   $('#main-slider-next').click(function(e) {
        e.preventDefault();
        next();
        return false;
    }); 
});

function next(){
    var cur = $(".slider-wrapper").children(".current");
    var next = cur.next(".main-slide");
    if(next.length) {
        cur.removeClass("current");
        next.addClass("current");
    }
}

这是对我所做的事的一种歪曲

如果您想将上一张幻灯片保持在视线范围内，只需删除该行：

cur.removeClass("current");

---

我可以问你为什么要重新发明轮子吗？有无数免费的jQuery滑块，它们可以很好地处理您的情况。解决方案是要么向当前选定的元素添加类以跟踪它，要么将元素放入数组中并通过索引以这种方式跟踪它们。然而，我不想重写以前做过很多次的工作。@isherwood我遇到的那些并没有真正提供我需要的定制功能。如果你知道一些插件，这将适合这个，请让我知道。谢谢。它们大多数都允许您滑动任何子元素（div、list等），还允许您将自己的元素指定为控件。您发现缺少哪些自定义功能？我遇到的大多数插件实际上不是内容滑块，而是图像滑块。其他插件只有选项卡式导航。不是箭。

cur.removeClass("current");