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)

})

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

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

3 个答案: