带有 3 张幻灯片的内容滑块答案

【问题标题】：Content slider with 3 slides带有 3 张幻灯片的内容滑块
【发布时间】：2013-01-25 21:44:33
【问题描述】：

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

我想为此添加更多幻灯片并单击按钮以滑动到每个幻灯片（没有上一个按钮）。当前的 jQuery 函数具有硬编码的下一个 div 的 id。现在当我添加更多幻灯片时，此方法将无效。我不知道如何编写一个函数来检测当前所在的 div，然后单击下一步，转到下一个。我怎样才能做到这一点？

谢谢。

我已经发布了下面的代码。

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>

CSS

#main-slider-space {
    overflow:hidden;
    width:600px;
    height:300px;
    background-color:#C36;
    margin-left:50px;
}

.slider-wrapper {
    position:relative;
    left:0;
    width:3000px;
    height:100%;
}

.main-slide {
    width:600px;
    height:100%;
    float:left;
}

#slide1 { background-color:#5FF; }
#slide2 { background-color:#F5F; }

.slider-buttons {
    position:absolute;
    width:30px;
    height:30px;
}

.slider-buttons:hover { cursor:pointer; }

#main-slider-next {
    background-color:#99CC66;
    right:30px;
    top:50%;
}

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;
    }); 
});

Fiddle

【问题讨论】：

请问您为什么要重新发明轮子？有无数的 jQuery 滑块可供免费使用，它们应该可以很好地处理您的情况。解决方案是向当前选定的元素添加类以跟踪它，或者将元素放在一个数组中并通过索引以这种方式跟踪它们。但是，我不倾向于重写以前做过很多次的事情。
@isherwood 我遇到的那些并没有真正提供我需要的自定义功能。如果您知道一些适合此的插件，请告诉我。谢谢。
其中大多数允许您滑动任何子元素（div、列表等），还允许您将自己的元素分配为控件。您发现缺少哪些自定义功能？
我遇到的大多数插件实际上不是内容滑块，而是图像滑块。
而其他的只有标签式导航。不是箭头。

标签： jquery html css slider slide

【解决方案1】：

我会使用 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");
    }
}

这是我所做的事情http://jsfiddle.net/NeekGerd/rhXZT/1/

如果您想保留上一张幻灯片，只需删除该行：

cur.removeClass("current");

【讨论】：