javascript - 使用下一个/上一个按钮切换图像

Question

有没有办法使用 jQuery 使用下一个/上一个按钮来切换图像？代码如下:

<div class="prevDiv">
    <a href="#"><img src="images/prev.png" alt="previous" /></a>
</div>
<div class="pic" id="picwebd">
    <img src="images/portfolio/webdesign/webd1.jpg" class="portPic" />
</div>
<div class="nextDiv">
    <a href="#"><img src="images/next.png" alt="previous" /></a>
</div>

我尝试根据我的需要修改此代码:http://jsfiddle.net/x5mCR/16/但我还没有成功。我认为在图像 src 中增加和减少数字就足够了，但我无法拿出合适的代码来做到这一点。 Google 也无济于事。

Answer 1

如果阅读这篇文章的人想要采用不同的方法，但仍使用 JQuery fadeIn，我将在代码下方发布该内容。

Here你可以找到它的 fiddle 。

这是 JavaScript 部分

//At the start will show the first image
$('#fullimage img.fullimage:first-child').fadeIn();
//Keep track of the image currently being visualized
var curr = $('#fullimage img.fullimage:first-child');

$('#next').on('click', function() {
    //Hide Current Image
    curr.hide();
    //Find Next Image
    var next = curr.next();
    //If theres no next image (is the last img), go back to first
    if (next.length == 0) next = $('#fullimage img:first');
    //Fade In
    next.fadeIn();
    //Save in curr the current Image
    curr = next;
    return false;
});

$('#prev').on('click', function() {
    curr.hide();
    var prev = curr.prev();
    if (prev.length == 0) prev = $('#fullimage img:last');
    prev.fadeIn();
    curr = prev;
    return false;
});

这是 HTML 部分

<div id="fullimage">
 <img class="fullimage" src="http://i.imgur.com/RHhXG.jpg" />
 <img class="fullimage" src="http://i.imgur.com/p1L2e.jpg" />
 <img class="fullimage" src="http://i.imgur.com/NsrI0.jpg" />
 <img class="fullimage" src="http://i.imgur.com/Ww6EU.jpg" /> 
</div>
<a href="#"><label id="prev">previous</label></a>
<a href="#"><label id="next">next</label></a>