javascript - 带计数器的图像 slider

Question

我知道这个问题可能有点无聊。但我现在正在搜索几个小时，但找不到组合我在 Internet 上找到的解决方案的方法。

所以我希望这里有人愿意帮助我。

我有一个简单的图像 slider ，我需要一个计数器，上面写着“Image 2 of 3”。

正如我所说，互联网上有很多解决方案，但我无法将它们实现到我的代码中。

这是我正在使用的代码:

HTML

<div class="slider">
 <img src="http://placehold.it/250x500" class="active"/>
 <img src="http://placehold.it/200x500" />
 <img src="http://placehold.it/100x500" />
</div>


<!--  ARROW AND COUNTER  -->
<div>
 <img src="assets/img/arrow-prev.png" class="prev" alt="Prev Arrow"/>
 <span id="counter"></span>
 <img src="assets/img/arrow-next.png" class="next" alt="Next Arrow"/>
</div>

CSS

.slider{
    height: 51vh;
    overflow: hidden;
}

.slider img{
    display: none;
    height: 51vh;
}

.slider img.active{
    display: inline-block;
}

.prev, .next{
    cursor: pointer;
}

JavaScript

$(document).ready(function () {
      $('.next').on('click', function () {
        var currentImg = $('.active');
        var nextImg = currentImg.next();

        if (nextImg.length) {
          currentImg.removeClass('active').css('z-index', -10);
          nextImg.addClass('active').css('z-index', 10);
        }
      });

      $('.prev').on('click', function () {
        var currentImg = $('.active');
        var prevImg = currentImg.prev();

        if (prevImg.length) {
          currentImg.removeClass('active').css('z-index', -10);
          prevImg.addClass('active').css('z-index', 10);
        }
      });
    });

如果有人能帮助我，那就太好了!

Answer 1

所以基本上你应该只跟踪所有图像和当前显示图像的索引。类似下面的代码可以做到这一点。

$(document).ready(function () {

    // Get images.
    var images = $('.slider > img');

    // Set starting index.
    var index = images.index($('.active'));
    $('#counter').text((index + 1) + ' of ' + images.length);

    $('.next').on('click', function () {
        var currentImg = $('.active');
        var nextImg = currentImg.next();

        if (nextImg.length) {
            currentImg.removeClass('active').css('z-index', -10);
            nextImg.addClass('active').css('z-index', 10);

            // Find the index of the image.
            var index = images.index(nextImg);
            $('#counter').text((index + 1) + ' of ' + images.length);
        }
    });

    $('.prev').on('click', function () {
        var currentImg = $('.active');
        var prevImg = currentImg.prev();

        if (prevImg.length) {
            currentImg.removeClass('active').css('z-index', -10);
            prevImg.addClass('active').css('z-index', 10);

            // Find the index of the image.
            var index = images.index(prevImg);
            $('#counter').text((index + 1) + ' of ' + images.length);
        }
    });
});

Link to jsfiddle example.