图片库与<img>标签？

Question

我正在建立一个网站，我需要在一组照片上“实施”一个画廊。 因为我使用的是 Spring MVC，所以我的图像带有 'img src..' 标签并且常规的 js 和 jquery 插件不起作用。 是否有任何插件/库可以帮助我做到这一点？ 如果没有，也欢迎提出解决方法的建议。 这是 html，如果它可以以某种方式提供帮助。

<div id="img-slider">

                <img class="slider-img" src="/LBProperties/img/bisc.jpg"/>
                <img class="slider-img" src="/LBProperties/img/bisc1.jpg"/>

</div>

谢谢 ！

Answer 1

您可以使用 CSS 隐藏所有图像：

img {
  width: 100px;
  height: 100px;
  display: none;
}

获取图像的处理程序：

var slider = document.querySelector('#img-slider');
var images = slider.getElementsByTagName('img');

将索引设置为 0：

var index = 0;

然后显示第一张图片：

images[index].style.display = 'block';

在 HTML 中添加一个按钮：

<div>
<button id="next">Next</button>
</div>

使用脚本获取它并添加一个点击处理程序：

var button = document.querySelector('#next');

button.addEventListener('click', function() {
  for (var ix = 0; ix < images.length; ix++) {
    images[ix].style.display = 'none';
  }

  index++;
  if (index >= images.length) index = 0;
  images[index].style.display = 'block';
});

单击处理程序循环遍历图像并隐藏它们，增加索引，检查以确保索引没有超过图像数量（如果超过，则将其重置为 0），然后显示下一个图像。

把它们放在一起：

https://jsfiddle.net/subterrane/osszqoLe/