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

How to find image src which is next in list of images

本文关键字：下一个 src 列表 何找      更新时间：2023-09-26

我有这样的图像库代码

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

以及作为的JavaScript代码

$('.next').click(function() {
    var curr = $('#largeImage').attr('src');
    curr = curr.replace('large','thumb');
    var next = $('#thumbs li').next('img[src=' + curr + ']').attr('id');
    alert(next);
});
if curr value is "images/ban_thumb.jpg". so i want to alert next value to be

"images/uae_tumb.jpg"，即下一个图像src，与curr的上一个img src相同。

这些将查找下一个和上一个图像源。注意，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);
});

您需要跟踪图像（可以使用数组），然后通过查找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++;
});

http://jsfiddle.net/oo7sdjdm/1/

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

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();
});
相关文章：