Question

我看了一下jQuery图片库的互联网，找不到一个适合我想做的事情。所以我最终自己创建了一个，并试图弄清楚如何使prev和next按钮起作用。

<div class="gallery portrait">
    <nav>
      <div class="close"><a href="#"></a></div>
      <div class="prev"><a href="#"></a></div>
      <div class="next"><a href="#"></a></div>
    </nav>
    <div class="cover">
        <a href="#"><img src="image.jpg"></a>
    </div>
    <ul class="thumbs">
        <li class="thumb">
            <a href="#"><img src="image.jpg"></a>
        </li>
        ...
    </ul>
</div>

我还使用了一些jQuery来向.full元素添加一个.thumb a类，这使得缩略图全屏显示。

$( ".thumb a" ).click(function() {
  $( this ).toggleClass( "full" );
  $( "nav" ).addClass( "show" );
});

现在我无法解决这个问题，我需要点击.prev或.next按钮，以便从当前元素中删除.full类并将其添加到下一个或上一个.thumb a元素，具体取决于单击的元素。

我在这里有一个演示设置：http://codepen.io/realph/pen/hjvBG

感谢任何帮助，提前谢谢！

P.S。如果结果很好，我打算免费发布它。我想你不能拥有太多的jQuery图片库，嗯？

Answer 1

您可以使用$ .next（）和$ .prev（）：

$(".prev").click(function () {
    var current = $('.full');
    current.prev('.thumb').addClass('full');
    current.removeClass('full');
    return false; // stop propagation; prevents image click event
});

$(".next").click(function () {
    var current = $('.full');
    current.next('.thumb').addClass('full');
    current.removeClass('full');
    return false; // stop propagation; prevents image click event
});

Answer 2

我建议您对代码进行以下添加，以处理您的下一个和上一个链接：

$(".next").click(function (event) {
  navigate("next");
  return false;
});

$(".prev").click(function (event) {
  navigate("prev");
  return false;
});

function navigate(operation) {
  var $thumbs = $(".thumb"),
      $full = $thumbs.find("a.full").closest(".thumb"),
      $next;
  $thumbs.find('a').removeClass('full');
  if (operation == 'prev' && $full.is($thumbs.first()))
     $next = $thumbs.last();
  else if (operation == 'next' && $full.is($thumbs.last()))
    $next = $thumbs.first();
  else
    $next = $full[operation]();
  $next.find('a').click();
}

这是forked CodePen。

Answer 3

这样的事情会让你开始，但是你想做的事情需要一点时间才能做到正确。

<script type="text/javascript">

    var imgSrcs = ['/imgs/this.jpg', '/imgs/will.jpg', '/imgs/work.jpg', '/imgs/just.jpg', '/imgs/fine.jpg'];//img url loaded into an array


    var btnPrev = document.getElementById('prev'),
        btnNext = document.getElementById('next'),
        cover = document.getElementById('cover'),
        thumb = document.getElementById('thumb'),
        currImgIx = 0;

    btnPrev.onclick = function () {

        if (currImgIx === 0) { return; };

        currImgIx--;
        cover.src = imgSrcs[currImg];
        thumb.src = imgSrcs[currImgIx];
    };

    btnNext.onclick = function () {

        if (currImgIx === imgSrcs.length - 1) { return; };

        currImgIx++;
        cover.src = imgSrcs[currImgIx];
        thumb.src = imgSrcs[currImgIx];
    };

</script>

<div class="gallery portrait">
    <nav>
        <div class="close">X</div>
        <div id="prev" class="prev">Prev</div>
        <div id="next" class="next">Next</div>
    </nav>
    <div class="cover">
        <a href="#"><img id="cover" src="image.jpg"></a>
    </div>
    <ul class="thumbs">
        <li class="thumb">
            <a href="#"><img id="thumb" src="image.jpg"></a>
        </li>
        ...
    </ul>
</div>

将类添加到以下元素

3 个答案: