Question

我在HTML文件中有多个图像。我想先显示5张图片。然后单击下一个箭头将显示接下来的5个图像并淡出原始图像，依此类推，直到所有图像都耗尽为止。类似地，对于上一个箭头，将显示前5个图像，依此类推，直到我们到达第一个图像。

<ul class="thumbs noscript">

<li>
    <a class="thumb" id = "26">
        <img src="images/1.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "28">
        <img src="images/2.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "25">
        <img src="images/3.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "3000">
        <img src="images/4.png" alt="Rice" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "1">
        <img src="images/5.jpg" alt="Pickles and Sauces" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "53">
        <img src="images/2.jpg" alt="Tea and Coffee" width="75" height="75"/>
    </a>
</li>
<li>
    <a class="thumb" id = "3">
        <img src="images/6.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "30">
        <img src="images/7.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "20">
        <img src="images/8.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "56">
        <img src="images/9.png" alt="Detergent Powder" width="75" height="75"/>
    </a>

</li>

<li>
    <a class="thumb" id = "27">
        <img src="images/10.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>
<ul>

一次只有一个图像有多个资源。但没有任何多个图像。如果有人可以分享想法，那将是非常有帮助的。

Answer 1

我没有对此做过任何广泛的研究，但你可能想看看bx滑块的旋转木马。

http://bxslider.com/examples/carousel-demystified

Answer 2

只需要像这样调用bxslider类。

$('.bxslider').bxSlider({
  minSlides: 5,
  maxSlides:5,
  slideWidth: 250,
  slideHeight: 250,
  slideMargin: 25,
  controls: true,
  pager: false,
});

定义图像的幻灯片限制和宽度高度。

具有多个图像的图像滑块

2 个答案: