Question

我知道这个问题可能有点无聊。但我现在正在寻找几个小时，却找不到结合我在互联网上找到的解决方案。

所以我希望有人能帮到我。

我有一个简单的图像滑块，我需要一个可能显示“图像2的3”的计数器。

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

这是我正在使用的代码：

HTML

def macroSample[A, B](c: blackbox.Context)
                     (lambda: c.Expr[A => B] /* <- lambda */) = { ... }

CSS

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

JAVASCRIPT

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

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

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

.prev, .next{
    cursor: pointer;
}

如果有人可以帮助我真的很棒！

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.

Answer 2

说明：我添加了一个检查活动类位置的索引变量：

var index = images.index($('.active'));
$('#counter').text("Image " + (index + 1) + ' of ' + images.length);

工作代码：

所以看看这段代码，因为这应该可以正常工作！

＆＃13;

$(document).ready(function() {
  var images = $('.slider > img');

  var index = images.index($('.active'));
  $('#counter').text("Image " + (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);

      var index = images.index(nextImg);
      $('#counter').text("Image " + (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);

      var index = images.index(prevImg);
      $('#counter').text("Image " + (index + 1) + ' of ' + images.length);
    }
  });
});

＆＃13;

.slider {
  height: 51vh;
  overflow: hidden;
}

.slider img {
  display: none;
  height: 51vh;
}

.slider img.active {
  display: inline-block;
}

.prev,
.next {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <img src="https://placehold.it/450x500/red" class="active" />
  <img src="https://placehold.it/450x500/r" />
  <img src="https://placehold.it/450x500" />
</div>


<!--  ARROW AND COUNTER  -->
<div>
  <img src="https://placehold.it/50/red" class="prev" alt="Prev Arrow" />
  <span id="counter"></span>
  <img src="https://placehold.it/50/blue" class="next" alt="Next Arrow" />
</div>

＆＃13;

我希望这是您所期望的解决方案。如果对我的回答有任何疑问，请告诉我:)

Answer 3

没有jQuery，只需简单的javascript。

使用css不透明度转换。

https://jsfiddle.net/uatthqjp/3/

const $images = document.querySelectorAll('img');
// `Array.from` for backward compatibility
// to convert `$images` into a real array
// so you can use `forEach` method on it
// use in conjunction with a polyfill
// for example: www.polyfill.io
const images = Array.from($images);

const $buttons = document.querySelector('.buttons');

// counter for current img
let current = 0;

// listen to click events on `$buttons` div
$buttons.addEventListener('click', function(e){
  // loop through all images
  images.forEach(function(img){
    // hide all images
    img.classList.remove('active');
  });

  // if the current clicked button
  // contain the class "next"
  if (e.target.classList.contains('next')) {
    // increment counter by 1
    current++;
    // reset the counter if reach last img
    if (current >= images.length) {
      current = 0;
    }
    // show current img
    images[current].classList.add('active');
  }
  
  // if the current clicked button
  // contain the class "prev"
  else {
    // decrease counter by 1
    current--;
    // if "prev" is pressed when first img is active
    // then go to the last img
    if (current < 0) {
      current = images.length - 1;
    }
    // show current img
    images[current].classList.add('active');
  }	
});

img {
  position: absolute;
  top: 40px;
  opacity: 0; /* hide images */
  transition: opacity 1s ease-in-out;
}

.active {
  opacity: 1;
}

<img class="active" src="https://dummyimage.com/100x100/e62020/fff&text=IMG1" alt="img1">
<img src="https://dummyimage.com/100x100/20e679/fff&text=IMG2" alt="img2">
<img src="https://dummyimage.com/100x100/4120e6/fff&text=IMG3" alt="img3">
    
<div class="buttons">
  <button class="prev">Prev</button>
  <button class="next">Next</button>
</div>

Answer 4

如果您寻找最简单的解决方案，那就有一个。其他用户添加的所有代码对我来说都很困难。您可以为每张幻灯片添加带有文本的简单html代码并写入“1/4”，“2/4”等。即使您有10张幻灯片，也可能比实现大量jquery或javascript更容易。

可以在此处找到示例W3Schools slideshow

另一个非常常见的解决方案是使用子弹导航器。许多全球公司都使用这种解决方案，因为每个人都很容易理解。示例 - 如果您有5张幻灯片，则图像的中心底部有5个子弹。如果此刻可以看到幻灯片＃3，则第三个项目符号会改变颜色以表明您在幻灯片＃3上。

有一些网站可以为滑块创建整个html / css / js，您可以根据需要自定义它。

页面示例：Jssor.com

图像滑块与计数器

4 个答案: