图片画廊，<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>标记？

回答

相关问题