非常简单的图像滑块/幻灯片,带左右键.没有自动播放

Question

我正在尝试制作一个非常非常简单的图像滑块/幻灯片,请不要自动播放.我只想点击下一个或上一个图像.有一些问题,你可以在下面阅读.

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

Answer 1

在阅读你对我之前的回答的评论后,我想我可能会把它作为一个单独的答案.

虽然我感谢您尝试手动操作以更好地掌握jQuery的方法,但我仍然强调使用现有框架的优点.

也就是说,这是一个解决方案.我修改了你的一些css和HTML只是为了让我更容易使用

工作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;

第2阶段 使用按钮 - 下一次单击事件.
1)从将要消失的幻灯片中删除当前活动类,并将其赋予类oldActive,以便我们知道它正在出现.

2)接下来是一个if语句,用于检查我们是否在幻灯片放映结束时需要再次返回到开头.它检查oldActive(即传出幻灯片)是否是最后一个孩子.如果是,则返回第一个孩子并使其"活跃".如果它不是最后一个孩子,那么只需抓住下一个元素(使用.next())并激活它.

3)我们删除了类oldActive,因为它不再需要了.

4)淡出所有幻灯片

5)淡入活动幻灯片

第3步

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

值得注意的是,有数千种方法可以实现这一目标.这仅仅是我对局势的看法.

Answer 2

为什么要重新发明轮子？还有更轻巧的jQuery幻灯片解决方案在那里,那么你可以在戳一根棍子,有人已经做好了为你努力工作和思考,你可能会遇到(跨浏览器兼容等)的问题.

jQuery Cycle是我最喜欢的轻量级库之一.

你想要实现的目标可以在公平中完成

    jQuery("#slideshow").cycle({
    timeout:0, // no autoplay
    fx: 'fade', //fade effect, although there are heaps
    next: '#next',
    prev: '#prev'
    });

JSFIDDLE看到它如何变得如此