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 for next按钮：

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 for prevIoUs按钮：

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,重复它自己.

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




});