圖片庫與<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/