圖片畫廊，<img>標記？

我正在建設一個網站，我需要在一組照片上實施一個畫廊。由於我使用的是Spring MVC，因此我的圖像使用'img src ..'標籤，而常規的js和jquery插件無法使用。有沒有任何插件/庫可以幫助我做到這一點？如果不是的話，也可以提出一些建議來解決這個問題。這裏是html，如果它能以某種方式幫助。圖片畫廊，<img>標記？

<div id="img-slider"> 

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

</div>

謝謝！

來源

2016-04-22 JovanIvanoski

_ 「定期JS和jQuery插件不工作」 _？爲什麼？ – Rayon

可以隱藏所有與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/

來源

2016-04-22 05:27:55 Will

好的會..會更容易與'jQuery' – Rayon

我不知道。輸入'document.querySelector'而不是'$'並不是非常困難。 ;）[我正在故意鈍] 我想你可能是正確的，如果你熟悉jQuery。如果我記得，有很多捷徑來操作集合，而不必循環它們。 – Will

圖片畫廊，<img>標記？

回答

相關問題