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

我有一个图像ID的文字数组，我需要在中将它们交换到按钮上的下一个或上一个图像点击事件。 初始当前图像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', ...... ); }   
   

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 = $('https://stackoverflow.com/questions/9489563/jquery-swap-next-previous-image-images-in-array/#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 $('https://stackoverflow.com/questions/9489563/jquery-swap-next-previous-image-images-in-array/#swapnextimg,https://stackoverflow.com/questions/9489563/jquery-swap-next-previous-image-images-in-array/#imageswap').click( function() { curIdx = (curIdx+1) % max; $("https://stackoverflow.com/questions/9489563/jquery-swap-next-previous-image-images-in-array/#imageswap").attr('src', imgSrcBase+images[curIdx]+'.jpg'); }); // Prev image on button click $('https://stackoverflow.com/questions/9489563/jquery-swap-next-previous-image-images-in-array/#swapprevsimg').click( function() { curIdx = (curIdx+max-1) % max; $("https://stackoverflow.com/questions/9489563/jquery-swap-next-previous-image-images-in-array/#imageswap").attr('src', imgSrcBase+images[curIdx]+'.jpg'); }); }); 

Answer 2

试试下面的代码，

 var images=["777777","666666","555555"]; var max = $(images).length; var imgPtr = 0; $('https://stackoverflow.com/questions/9489563/jquery-swap-next-previous-image-images-in-array/#swapnextimg').click{ if (imgPtr == max) { //comment the below return and set imgPtr to 0 for rotating the images return; } $("https://stackoverflow.com/questions/9489563/jquery-swap-next-previous-image-images-in-array/#imageswap").attr('src', 'http://site.com/images/' + images[imgPtr++] + '.jpg'); } $('https://stackoverflow.com/questions/9489563/jquery-swap-next-previous-image-images-in-array/#swapprevsimg').click{ if (imgPtr == 0) { //comment the below return and set imgPtr to max-1 for rotating the images return; } $("https://stackoverflow.com/questions/9489563/jquery-swap-next-previous-image-images-in-array/#imageswap").attr('src', 'http://site.com/images/' + images[imgPtr--] + '.jpg'); }   
   

Answer 3

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

要做到这一点，你需要nex和prev按钮。

 
  prev next  

物体：

 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) }) 

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