我正在尝试制作一个非常非常简单的图像滑块/幻灯片,请不要自动播放。我只想在点击时转到下一个或上一个图像。有一些问题,您可以在下面阅读。
这是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 工作正常,但如果用户单击最后一张幻灯片上的下一个按钮,它会跳过第一张图像。它只显示第一个图像一次,所有其他图像将在每次单击下一个时保持滑动。出于某种原因 display: none 被添加到第一张图像中,但我不知道该代码来自哪里。
上一个按钮的 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()。第一次单击上一个按钮时它工作正常。假设我们正在查看 Image #4。当我单击上一个按钮时,它会转到 Image #3,就像它应该的那样。但是,当再次单击它时,它不会转到 Image #2,它会返回到 Image #4,然后是 #3,然后是 #4,不断重复。