Question

我有jsp页面，我从数据库获取产品，每个产品我有几个图像。我想在JS中为每个产品创建简单的图像滑块，但我无法在JS上获得一系列图像。我尝试通过img标签中的id来做，但是为null。我知道我需要使用JQuery，我需要获得每个产品img的链接，但不知道如何，也许有人可以帮助我。

Jsp

<c:forEach items="${produkt}" var="produkt">
<div class="produkt-container" style=" border: 1px solid #ccc; display: inline-block;text-align:left;">
<a   href="produkt${produkt.id}" >${produkt.model}</a>
<%--<img src="${produkt.images[o]}" alt="">--%>
 <div id="img-container"  style="max-width: 280px">
   <button class="btnClass" id="prev" onclick="plusImg(-1)">&#10094; 
</button>
<c:forEach  items="${produkt.images}" var="image">
    <img src="${image}"  id="img-list"  alt="" style="border: 1px solid black; width: 260px">
</c:forEach>
   <button class="btnClass" id="next" onclick="plusImg(1)">&#10095;</button>
</div>
</div>
</c:forEach>

js中的简单滑块

<script>

var count = 1;
sliderImg(count);

function plusImg(n) {
sliderImg(count += n);
}

function sliderImg (n) {
    var i;
 //  var ar  = $('.produkt-container').find('a');
 //  var x = $(this).attr('href');

var x = document.getElementsByClassName(".img-list");
if(n > x.length){count =1}
if(n < 1){count = x.length}
for (i =0; i<x.length; i++){
    x[i].style.display ="none";
}
x[count-1].style.display = "block";

console.log(x);
}

无法使用JQuery，js，jsp获取图像数组

0 个答案: