Question

我的图片库中有这样的代码

<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

＆＃34;影像/ uae_thumb.jpg＆＃34;即下一个图像src和之前的curr的img src相同。

Answer 1

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

Answer 2

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

Answer 3

这是一个简单的解决方案，有一些好的做法，比如使用ID，分组变量，缓存jQuery对象。我们将使用一个计数器来获取下一个和前一个以及一个小函数来获取indexetvoilà的图像：

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

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

3 个答案: