javascript - 带按钮的多行图像 slider

Question

我正在开发一个网站，该网站应该有带有可点击按钮的图像 slider ，这些按钮可以翻转到下一张图像。

我能够制作单个 slider /页面，但由于我还没有编码经验，因此在尝试直接制作多个 slider 时遇到了困难。某个 slider 的按钮开始混淆，并且也针对其他 slider ，或仅针对第一个 slider ，但不是我想要的方式..

所以我开始复制和重复相同的代码行，并将它们分别应用于图像组。 我还想要一些文本和图像一起翻转，所以我将文本和图像与按钮组合在一起，最后我得到了很多重复，而且代码太长了。 :-)

现在它可以工作，但我认为有一个更简单的解决方案，可以使我的代码更短。

谁能帮我:

1. 有一个好的 java 脚本，在有多个 slider 时不会混淆目标？

2. 只有一个“按钮”/ slider 而不是将它们复制到所有“containergrid”组，但仍然将文本与图像一起翻转？

谢谢，抱歉代码太长了。 :)

    <div class="content">

<!---THE FIRST SLIDER--->

        <div class="slider_1">
            <div class="slides_1">
                <div class="containergrid">
                    <div class="description">
                        <p class="maindescription">Description</p>
                        <p class="year">2017</p>
                    </div>
                    <div class="imgbutton">
                        <img class="img_1_1">
                        <div class="button">
                            <button class="prev"
                              onclick="plusDivs1(-1)"></button>
                            <button class="next" 
                              onclick="plusDivs1(1)"></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slides_1">
                 <div class="containergrid">
                     <div class="description">
                         <p class="maindescription">Description</p>
                         <p class="year">2017</p>
                     </div>
                     <div class="imgbutton">
                         <img class="img_1_2">
                         <div class="button">
                            <button class="prev"
                              onclick="plusDivs1(-1)"></button>
                            <button class="next" 
                              onclick="plusDivs1(1)"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<!---THE SECOND SLIDER--->

        <div class="slider_2">
            <div class="slides_2">
                <div class="containergrid">
                    <div class="description">
                        <p class="maindescription">Description</p>
                        <p class="year">2017</p>
                    </div>
                    <div class="imgbutton">
                        <img class="img_2_1">
                        <div class="button">
                            <button class="prev"
                              onclick="plusDivs1(-1)"></button>
                            <button class="next" 
                              onclick="plusDivs1(1)"></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slides_2">
                 <div class="containergrid">
                     <div class="description">
                         <p class="maindescription">Description</p>
                         <p class="year">2017</p>
                     </div>
                     <div class="imgbutton">
                         <img class="img_2_2">
                         <div class="button">
                            <button class="prev"
                              onclick="plusDivs1(-1)"></button>
                            <button class="next" 
                              onclick="plusDivs1(1)"></button>
                        </div>
                    </div>
                </div>
            </div>
         </div>
      </div>

    <script>
        var slideIndex = 1;
        showDivs1(slideIndex);

        function plusDivs1(n) {
            showDivs1(slideIndex += n);
        }

        function showDivs1(n) {
            var i;
            var x = document.getElementsByClassName("slides_1");
            if (n > x.length) { slideIndex = 1 }
            if (n < 1) { slideIndex = x.length }
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            x[slideIndex - 1].style.display = "flex";
        }
    </script>

    <script>
        var slideIndex = 1;
        showDivs2(slideIndex);

        function plusDivs2(n) {
            showDivs2(slideIndex += n);
        }

        function showDivs2(n) {
            var i;
            var x = document.getElementsByClassName("slides_2");
            if (n > x.length) { slideIndex = 1 }
            if (n < 1) { slideIndex = x.length }
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            x[slideIndex - 1].style.display = "flex";
        }
    </script>

Answer 1

因此，您只需将对幻灯片的引用传递给 showDivs 函数，这样您就可以使点击次数相互独立。您仍然需要分别初始化每个 slider 。

function plusDivs(slider, n) {
    showDivs(slider, slideIndex += n);
  }

  function showDivs(slider, index) {
    var i;
    var x = document.getElementsByClassName(slider);
    if (index > x.length) {
      slideIndex = 1
    }
    if (index < 1) {
      slideIndex = x.length
    }
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    x[slideIndex - 1].style.display = "flex";
  }

  // Initialize the sliders
  var slideIndex = 1;
  showDivs('slides_1', slideIndex);
  showDivs('slides_2', slideIndex);

在您的 HTML 中，您只需将引用传递给 plusDivs 函数:

onclick="plusDivs('slides_1', 1)"

这是一个fiddle显示一个工作示例