jquery - jQuery 的一页错误中的多个幻灯片

问题描述

我已经使用 jQuery 创建了一个幻灯片，但是由于某种原因，幻灯片中的一些图片没有像它们应该的那样滑动。例如：如果幻灯片 1 有 5 张图片，它将只显示前两张图片并循环播放。

这是HTML：

<div class="this_page">
        <div class="container band_1">
            <div class="sub_container">
                <img class="mySlides1" src="../art/photo-12.jpg">
                <img class="mySlides1" src="../art/photo-13.jpg">
                <img class="mySlides1" src="../art/photo-10.jpg">
                <img class="mySlides1" src="../art/photo-14.jpg">
                <img class="mySlides1" src="../art/photo-11.jpg">
                <img class="mySlides1" src="../art/photo-15.jpg">
                <button class="button left" onclick="plusDivs(-1, 0)">&#10094;</button>
                <button class="button right" onclick="plusDivs(1, 0)">&#10095;</button>         
            </div>
            <div class="sub_container">
                <h1>Hello</h1>
            </div>
        </div>


        <div class="container band_2">
            <div class="sub_container">
                <h1>Hello</h1>
            </div>
            <div class="sub_container">
                <img class="mySlides2" src="../art/photo-21.jpg">
                <img class="mySlides2" src="../art/photo-22.jpg">
                <img class="mySlides2" src="../art/photo-20.jpg">
                <img class="mySlides2" src="../art/photo-23.jpg">
                <img class="mySlides2" src="../art/photo-24.jpg">
                <button class="button left" onclick="plusDivs(-1, 1)">&#10094;</button>
                <button class="button right" onclick="plusDivs(1, 1)">&#10095;</button>         
            </div>
        </div>


        <div class="container band_1">
            <div class="sub_container">
                <img class="mySlides3" src="../art/photo-16.jpg">
                <img class="mySlides3" src="../art/photo-17.jpg">
                <img class="mySlides3" src="../art/photo-18.jpg">
                <button class="button left" onclick="plusDivs(-1, 2)">&#10094;</button>
                <button class="button right" onclick="plusDivs(1, 2)">&#10095;</button>         
            </div>
            <div class="sub_container">
                <h1>Hello</h1>
            </div>
        </div>

        <div class="container band_2">
            <div class="sub_container">
                <h1>Hello</h1>
            </div>
            <div class="sub_container">
                <img class="mySlides4" src="../art/photo-25.jpg">
                <img class="mySlides4" src="../art/photo-26.jpg">
                <img class="mySlides4" src="../art/photo-27.jpg">
                <img class="mySlides4" src="../art/photo-28.jpg">
                <img class="mySlides4" src="../art/photo-29.jpg">
                <button class="button left" onclick="plusDivs(-1, 3)">&#10094;</button>
                <button class="button right" onclick="plusDivs(1, 3)">&#10095;</button>         
            </div>
        </div>


    </div>

和 jQuery：

var slideIndex = [1,3];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4"]
showDivs(1, 0);
showDivs(1, 1);
showDivs(1, 2);
showDivs(1, 3);

function plusDivs(n, no) {
    showDivs(slideIndex[no] += n, no);
}

function showDivs(n, no) {
    var i;
    var x = document.getElementsByClassName(slideId[no]);
    if (n > x.length) {slideIndex[no] = 1}
        if (n < 3) {slideIndex[no] = x.length}
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";  
            }
            x[slideIndex[no]-1].style.display = "block";  
        }

任何帮助将非常感激！！

Ps 只是一个旁注问题，什么大小的 jpeg 文件最适合网站？

标签： jqueryhtmlslideshow

jquery - jQuery 的一页错误中的多个幻灯片 - 一些图片被排除在外

问题描述

解决方案

推荐阅读