jQuery交换下一个/上一个图像，数组中的图像

Question

我有一个图像 ID 的文字数组，我需要将它们在 <img src=""> 中交换为按钮单击事件上的下一个或上一个图像。初始当前图像 ID 可从初始页面加载时提供的服务器端 img src 获知。

显然，在交换之前，需要使用目标 ID 构造 URL，如下所示：

'http://site.com/images/' + imageID + '.jpg'

我是一名 JS/jQuery 初学者，想学习一种正确、简约的方法。 TIA。

我的代码开始：

var images=["777777","666666","555555"];
var max = $(images).length;

$('#swapnextimg').click{
   $("#imageswap").attr('src', ...... );
}

<a id="swapnextimg"></a>
<a id="swapprevsimg"></a>
<div id="imagebox">
    <img id="imageswap" src="http://site.com/images/123456.jpg">
</div>

Answer 1

这是一个例子：

http://jsfiddle.net/ndFGL/

$(function() {
    // Image ID array
    var images = ['240', '260', '250', '123', '200'];
    var max = images.length;

    // Get current image src
    var curSrc = $('#imageswap').attr('src');

    // Find ID in image src
    var curID = curSrc.replace(/.*\/(.*?)\.jpg/i, '$1');

    var curIdx = 0;

    // Search image list for index of current ID
    while (curIdx < max) {
        if (images[curIdx] == curID) {
            break;
        }
        curIdx++;
    }

    // For convenience
    var imgSrcBase = 'http://placehold.it/';

    // Next image on button (and image) click
    $('#swapnextimg,#imageswap').click( function() {
        curIdx = (curIdx+1) % max;
        $("#imageswap").attr('src', imgSrcBase+images[curIdx]+'.jpg');
    });

    // Prev image on button click
    $('#swapprevsimg').click( function() {
        curIdx = (curIdx+max-1) % max;
        $("#imageswap").attr('src', imgSrcBase+images[curIdx]+'.jpg');
    });

});

Answer 2

试试下面的代码，

var images=["777777","666666","555555"];
var max = $(images).length;
var imgPtr = 0;

$('#swapnextimg').click{

   if (imgPtr == max) {
       //comment the below return and set imgPtr to 0 for rotating the images
       return;
   }

   $("#imageswap").attr('src', 'http://site.com/images/' + images[imgPtr++] + '.jpg');
}

$('#swapprevsimg').click{

   if (imgPtr == 0) {
       //comment the below return and set imgPtr to max-1 for rotating the images
       return;
   }

   $("#imageswap").attr('src', 'http://site.com/images/' + images[imgPtr--] + '.jpg');
}

<a id="swapnextimg"></a>
<a id="swapprevsimg"></a>
<div id="imagebox">
    <img id="imageswap" src="http://site.com/images/123456.jpg">
</div>

Answer 3

我假设你有一个 img 标签，而且只有一个。并且这样做的目的是更改单个图像标签。

为此，您需要 nex 和 prev 按钮。

<div id="container">
    <img src="#" data-num="" />
    <span class"prev">prev</span>
    <span class"next">next</span>  
</div>

对象：

var obj = [0: 'dog', 1: 'cat'];

现在下一个和上一个工作。我们将看一下.on() 方法。

$('.container span').on('click', function(){
    var $this = $(this), // span
        currentNum = $this.siblings('img').data('num'), // img data-num
        nextNum = $this.is('.next') ? currentNum+1 : currentNum-1, // if class is next add 1, if not remove 1
        link = "http://site.com/images/" + obj[nextNum] + ".jpg" // the link

    // either it's not the last images or it returns
    nextNum != obj.length() || return 

    $('img').attr('src', link).data('num', nextNum)

})

希望这对您有所帮助。如果没有请告诉我