Javascript 如何找到图像列表中的下一个图像src

我有这样的图像库代码

<div id="panel">
   <div id="img-grp-wrap">
       <div class="img-wrap">
            <img id="largeImage" src="images/1_large.jpg" />
            <div id="description">1st image description</div>
       </div>

       <img src="arrowright.jpg" class="next" alt="Next"/> 
       <img src="arrowleft.jpg" class="prev" alt="Previous"/>

   </div>
</div>

<div id="thumbs" class="content mThumbnailScroller">
<ul>
   <li><img src="images/ind_thumb.jpg" alt="1st image description" /></li>
   <li><img src="images/pak_thumb.jpg" alt="2nd image description" /></li>
   <li><img src="images/sl_thumb.jpg" alt="3rd image description" /></li>
   <li><img src="images/nz_thumb.jpg" alt="4th image description" /></li>
   <li><img src="images/ban_thumb.jpg" alt="5th image description" /></li>
   <li><img src="images/uae_thumb.jpg" alt="6th image description" /></li>
   <li><img src="images/sa_thumb.jpg" alt="7th image description" /></li>
</ul>
</div>

---

“images/uae_thumb.jpg”即下一个图像src，与当前的上一个img src相同。

您需要跟踪图像（可以使用数组进行此操作），然后通过查找

DOM中的所有图像来填充数组

例如，单击按钮时，可以使用数组并检索图像源

var arr = [];
var count = 0;

$("#thumbs li img").each(function() {
   var item = $(this).attr("src");
   arr.push(item);
});

$(".next").click(function() {
    $("input").val(arr[count]);
    count++;
});

这些将查找下一个和上一个图像源。注意，
src
属性需要引号，因为它有一个斜杠：

$('.next').click(function() {
  var curr = $('#largeImage').attr('src');
  curr = curr.replace('large','thumb');

  var next = $('img[src="' + curr +'"]')
              .parent('li')
              .next()
              .find('img').attr('src');
  alert(next);
});

$('.prev').click(function() {
  var curr = $('#largeImage').attr('src');
  curr = curr.replace('large','thumb');

  var prev = $('img[src="' + curr + '"]')
              .parent('li')
              .prev()
              .find('img').attr('src');
  alert(prev);
});

下面是一个简单的解决方案，其中包含一些良好的实践，如使用ID、分组变量、缓存jQuery对象。。我们将使用一个计数器获取下一个和上一个，并使用一个小函数通过索引et voilá获取图像：

var i = 0, // Counter
    $images = $('#thumbs').find('img'), // Cache the jQuery object
    total = $images.length,
    getCurrentItem = function () {
        var currentItem = Math.abs(i % total), // Get item index
            $currentItem = $images.eq(currentItem), // Current item object
            currentItemSrc = $currentItem.attr('src').replace('thumb', 'large');
        alert(currentItemSrc);
    };

$('.next').on('click', function () {
    i++;
    getCurrentItem();
});

$('.prev').on('click', function () {
    i--;
    if (i < 0) {
        i = total - 1; // If negative go back to the last image
    }
    getCurrentItem();
});

var i=0，//计数器
$images=$（'#thumbs'）。查找（'img'），//缓存jQuery对象
总计=$images.length，
getCurrentItem=函数（）{
var currentItem=Math.abs（i%总计），//获取项目索引
$currentItem=$images.eq（currentItem），//当前项对象
currentItemSrc=$currentItem.attr（'src'）。replace（'thumb'，'large'）；
警报（currentItemSrc）；
};
$（'.next'）。在（'click'，函数（）{
i++；
getCurrentItem（）；
});
$（'.prev'）。在（'click'，函数（）{
我--；
if（i<0）{
i=total-1；//如果为负数，则返回到最后一个图像
}
getCurrentItem（）；
});

var i = 0, // Counter
    $images = $('#thumbs').find('img'), // Cache the jQuery object
    total = $images.length,
    getCurrentItem = function () {
        var currentItem = Math.abs(i % total), // Get item index
            $currentItem = $images.eq(currentItem), // Current item object
            currentItemSrc = $currentItem.attr('src').replace('thumb', 'large');
        alert(currentItemSrc);
    };

$('.next').on('click', function () {
    i++;
    getCurrentItem();
});

$('.prev').on('click', function () {
    i--;
    if (i < 0) {
        i = total - 1; // If negative go back to the last image
    }
    getCurrentItem();
});