jquery - 带有左右按钮的非常简单的图像滑块/幻灯片。没有自动播放

我正在尝试制作一个非常非常简单的图像滑块/幻灯片，没有自动播放功能。我只想单击即可转到下一个或上一个图像。有一些问题，您可以在下面阅读。

这是jsFiddle http://jsfiddle.net/HsEne/12/（我只是在小提琴中使用背景颜色而不是图像，以及将img切换为div，但这当然是完全相同的问题）

HTML：

<div id="slider-wrapper">

<div id="slider">
<img class="sp" src="/img1.jpg">
<img class="sp" src="/img2.jpg">
<img class="sp" src="/img3.jpg">
<img class="sp" src="/img4.jpg">
<img class="sp" src="/img5.jpg">
<img class="sp" src="/img6.jpg">
</div>

<img id="button-previous" src="/button-arrow-left.jpg">
<img id="button-next" src="/button-arrow-right.jpg">
</div>

CSS：

#slider-wrapper {
display: block;
max-width: 790px;
margin: 5% auto;
max-height: 500px;
height: 100%; }

#slider {
display: block;
position: relative;
z-index: 99999;
max-width: 710px;
width: 100%;
margin: 0 auto; }

#button-previous {
position: relative;
left: 0;
margin-top: 40%;
width: 40px;
height: 60px; }

#button-next {
position: relative;
margin-top: 40%;
float: right; }

.sp {
position: absolute; }

#slider .sp {
max-width: 710px;
width: 100%;
max-height: 500px; }

下一个按钮的jQuery：

jQuery("document").ready(function(){
    jQuery("#slider > img:gt(0)").hide();
     jQuery("#button-next").click(function() {
        jQuery("#slider > img:first")
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .appendTo("#slider");
  });
});

上面的jQuery工作正常，但如果用户单击最后一张幻灯片上的下一个按钮，则跳过第一张图片。它只显示一次第一张图像，所有其他图像每次单击都会保持滑动。由于某种原因显示：没有添加到第一张图像，但我不知道该代码来自何处。

上一个按钮的jQuery：

jQuery("document").ready(function(){
    jQuery("#slider > img:gt(0)").hide();
     jQuery("#button-previous").click(function() {
        jQuery("#slider > img:last")
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .appendTo("#slider");
  });
});

上面的这个jquery代码将返回应该预览的图像。但是，再次单击它不会执行任何操作。

我还尝试用.prev（）代替.next（）。第一次单击上一个按钮时，它运行良好。假设我们正在查看图像＃4。当我单击上一个按钮时，它应该转到图像3。但是当再次单击它时，它不会转到图像＃2，而是返回到图像＃4，然后返回到图像＃3，然后返回到图像＃4，重复自身。

最佳答案

在阅读了您对先前答案的评论后，我认为我可以将其作为单独的答案。

尽管我赞赏您尝试手动执行以更好地掌握jQuery的方法，但我仍然强调使用现有框架的优点。

也就是说，这是一个解决方案。我已经修改了您的某些CSS和HTML，以使其更易于使用

WORKING JS FIDDLE- http://jsfiddle.net/HsEne/15/

这是jQuery

$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();

    $('#button-next').click(function(){

    $('.active').removeClass('active').addClass('oldActive');
                   if ( $('.oldActive').is(':last-child')) {
        $('.sp').first().addClass('active');
        }
        else{
        $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();


    });

       $('#button-previous').click(function(){
    $('.active').removeClass('active').addClass('oldActive');
           if ( $('.oldActive').is(':first-child')) {
        $('.sp').last().addClass('active');
        }
           else{
    $('.oldActive').prev().addClass('active');
           }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
    });




});

所以现在解释。
阶段1
1）准备好将脚本加载到文档中。

2）抓住第一张幻灯片，并在其中添加一个“活动”类，这样我们就知道要处理哪张幻灯片。

3）隐藏所有幻灯片并显示活动幻灯片。因此，现在幻灯片＃1是显示块，其余所有块都显示：none;

第二阶段
使用按钮下一个单击事件。
1）从将要消失的幻灯片中删除当前的活动类，并将其分配为oldActive类，因此我们知道它即将退出。

2）接下来是一条if语句，用于检查我们是否在幻灯片的结尾处，是否需要再次返回到开头。它检查oldActive（即传出的幻灯片）是否是最后一个孩子。如果是，则返回第一个孩子并使其“活跃”。如果不是最后一个孩子，则只需抓住下一个元素（使用.next（））并将其激活。

3）我们删除类oldActive，因为不再需要它。

4）淡出所有幻灯片

5）淡入活动幻灯片

第三步

与第二步相同，但使用一些反向逻辑来向后遍历元素。

重要的是要注意，有成千上万的方法可以实现这一目标。这只是我对情况的看法。