使用jquery滚动幻灯片

Question

我有4个div内联，使用php我为每个div分配一个唯一的id，在任何时候只有一个div可见，这是结果html:

<div id="contentslider">
    <div class="cs_wrapper">
        <div class="cs_slider">
            <div id="1" class="cs_article">
                SLIDE 1
            </div>
            <div id="2" class="cs_article">
                SLIDE 2
            </div>
            <div id="3" class="cs_article">
                SLIDE 3
            </div>
            <div id="4" class="cs_article">
                SLIDE 4
            </div>
        </div>
    </div>
</div>

和css：

.contentslider {
  position:relative;
  display:block;
  width:480px;
  height:400px;
  margin:0 auto;
  overflow:hidden;
}
.cs_wrapper {
  position:relative;
  display:block;
  width:480px;
  height:400px;
  margin:0;
  padding:0;
  overflow:hidden;
}
.cs_slider {
  position:absolute;
  width:10000px;
  height:100%;
  margin:0;
  padding:0;
}
.cs_article {
  float:left;
  position:relative;
  top:0;
  left:0;
  display:block;
  width:480px;
  height:400px;
  margin:0 auto;
  padding:0;
}

我试图编写一个jquery函数，给定一个id，它将动画化并转到所选幻灯片，但我不知道从哪里开始，有什么建议吗？

EDIT：如果您需要，这里有一个jsFiddle。

Answer 1

使用该函数制作了一个快速的jsFiddle。正如上面对您问题的评论，我将ID更改为非数字。

以下是功能：

function GoToSlide(id) {
    $(".cs_article:visible").slideUp("slow");
    $("#" + id).slideDown("slow");
}

Answer 2

Martin Angelov有一个很好的教程，介绍如何创建一个与您所描述的非常相似的应用程序：漂亮的苹果风格的CSS幻灯片库；jQuery

Answer 3

我更喜欢隐藏所有方法。

这是在不使用css的情况下使用箭头键导航幻灯片。

$(".cs_article").hide();
$(".cs_article").eq(0).show();
$(window).keydown(function(e) {
    curSlide = $(".cs_slider .cs_article:visible");
    if (e.which==37 &&  curSlide.prev()[0]) { 
        curSlide.hide(); curSlide.prev().show();
    } else if (e.which==39 && curSlide.next()[0]) {
        curSlide.hide(); curSlide.next().show();
    }
})

如果你想显示一个，只需显示一个

$(".cs_article").hide();
$("#3.cs_article").show();  // to show slide 3 only