时间戳

首页 > 解决方案 > 带按钮的多行图像滑块

javascript - 带按钮的多行图像滑块

问题描述

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

我能够制作一个滑块/页面，但由于我还没有编码经验，所以当我尝试制作多个滑块直接相互跟随时遇到了困难。某个滑块的按钮开始混淆，并且也针对其他滑块，或者仅针对第一个滑块，但不是我想要的方式..

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

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

有人可以帮我：

  1. 当有多个滑块时，拥有一个不会混淆目标的好的 java 脚本？

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

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

    <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>

标签： javascriptcss

解决方案

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

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)"

这是一个显示工作示例的小提琴

推荐阅读