这里是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,重复它自己.
解决方法
虽然我感谢您尝试手动操作以更好地掌握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)淡入活动幻灯片
第3步
与第二步相同,但使用一些反向逻辑向后遍历元素.
值得注意的是,有数千种方法可以实现这一目标.这仅仅是我对局势的看法.
