使用 Next/Previous 按钮切换图像答案

【问题标题】：Switching image with Next/Previous buttons使用 Next/Previous 按钮切换图像
【发布时间】：2013-12-12 07:21:04
【问题描述】：

有没有办法通过 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 也无济于事。

【问题讨论】：

你想做什么？使用 PREV 和 BACK 按钮来滑动图像？
对于您发布的代码，您需要了解几件事。 prev() 是一个遍历树的 jquery 方法。如果你想回去，你可以使用prev()。但这还不够，当你在第一个位置时，如果你往后推，你想走到最后。所以你可以使用$('#fullimage img:last').fadeIn();。喜欢this。现在，您可以使用这两个代码合并并创建您想要的下一个/上一个按钮。
请发布您的代码修改并告诉我们出了什么问题。

标签： javascript jquery html image next

【解决方案1】：

如果任何阅读这篇文章的人想要一种不同的方法仍然使用 JQuery fadeIn，我在下面的代码中发布。

Here你可以找到它的小提琴。

这里是 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>

【讨论】：

【解决方案2】：

这是减少 html 代码的动态且简单的脚本

http://jsfiddle.net/x5mCR/32/

$("#thumbnail a").on('click', function (eve) {
    eve.preventDefault();
    var link = ($(this).attr("href"));
    var content = '<img src="' + link + '"/>';
    $("#fullimage").hide().html(content).fadeIn('slow');

});

【讨论】：

【解决方案3】：

删除thumbnail类的锚点，并给对应的<img>标签thumbnail类，然后对缩略图类使用jQuery点击方法：

$(".thumbnail").click(function() {
    $(".fullimage").src = $(this).attr("src");
});

确保您在 #fullimage div 中有一个 .fullimage。

这与下一个/上一个按钮不同 - 但它会修复您制作的 JSFiddle。

http://jsfiddle.net/x5mCR/34/

【讨论】：

【解决方案4】：

var picNumber = 1;

$(".nextDiv").click(function() {
    picNumber++;
    if (picNumber > 3) picNumber = 1; // Change 3 to how many pictures there are.
    $(".pic img").attr("src", "images/portfolio/webdesign/webd" + picNumber + ".jpg");
});
$(".prevDiv").click(function() {
    picNumber--;
    if (picNumber < 1) picNumber = 3; // Change 3 to how many pictures there are.
    $(".pic img").attr("src", "images/portfolio/webdesign/webd" + picNumber + ".jpg");
});

【讨论】：

【解决方案5】：

如果我理解正确，您正在尝试使用箭头键在图片之间来回移动...所以如果是这种情况，我建议您看看这篇文章：Binding arrow keys in JS/jQuery

另外，为了您的方便，我只是从该帖子中获取代码并将其与您的小提琴中的函数结合以获得此：

$(document).keydown(function (e) {
    if (e.keyCode == 39) {
    $(".fullimage").hide();
    var next = $(this).next();
    if (next.length > 0) {
        next.fadeIn();
    } else {
        $('#fullimage img:first').fadeIn();
    }
    return false;
}

});

在测试中，它看起来可能需要一些修改，而且，您显然需要在按下后退按钮时创建一个类似的函数，但我认为如果我正确理解您的问题，这是一个很好的开始地点。

【讨论】：