Question

如何使用CSS类名（而非ID）修复以下jQuery代码，以使多个滑块正常工作？

正如您在CodePen中看到的那样，它到处都是，并且无法按预期工作。滑块无法正常工作。

HTML

<body>
  <div>
    <div class="slider-btn">
      <button class="slider-prev"><</button>
      <button class="slider-next">></button>
    </div>
    <div class="slider">
      <div class="slide active">
        <h2>Slide 1</h2>
      </div>
      <div class="slide">
        <h2>Slide 2</h2>
      </div>
    </div> 
    <div>
      <p>Some other content here</p> 
    </div>
    <div class="slider-btn">
      <button class="slider-prev"><</button>
      <button class="slider-next">></button>
    </div>      
    <div class="slider">
      <div class="slide active">
        <h2>Slide 1</h2>
      </div>
      <div class="slide">
        <h2>Slide 2</h2>
      </div>
    </div> 
    <div>
      <p>Some other content here</p> 
    </div>      
  </div>
</body>

CSS

.slider {
  position: relative;
  width: 80%;
}

.slide {
    position: absolute;
    opacity: 0;
}

.active {
    transition: opacity 500ms ease;
    opacity:1;
}

JS

var allSlides = $('.slide');
var activeSlide = 0;

setInterval('autoSlide()', 4000);

$(".slider-next").click(function() {
  if (activeSlide+1 >= allSlides.length) {
    allSlides.eq(activeSlide).removeClass("active");
    activeSlide = 0;
    allSlides.eq(0).addClass("active");
  }
  else {
    allSlides.eq(activeSlide).removeClass("active");
    activeSlide++;
    allSlides.eq(activeSlide).addClass("active");
  }
});
$(".slider-prev").click(function() {
  if (activeSlide-1 < 0) {
    allSlides.eq(0).removeClass("active");
    activeSlide = allSlides.length-1;
    allSlides.eq(activeSlide).addClass("active");
  }
  else {
    allSlides.eq(activeSlide).removeClass("active");
    activeSlide--;
    allSlides.eq(activeSlide).addClass("active");
  }
});

function autoSlide() {
    if (activeSlide+1 >= allSlides.length) {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide = 0;
      allSlides.eq(0).addClass("active");
    }
    else {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide++;
      allSlides.eq(activeSlide).addClass("active");
    }
}

Answer 1

我不确定您对滑块的操作，但是我能够连接处理程序并使您前进。我为滑块设置了一个数组，然后在页面加载时将处理程序连接到滑块。单击滑块时，我认为您想循环浏览滑块的索引并将css类设置为active。我是在这里做的。请注意，按索引选择的滑块可能为空。量身定制使用答案。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    <style type="text/css">
        .slider {
            position: relative;
            width: 80%;
        }

        .slide {
            position: relative;
            opacity: 0;
        }

        .active {
            transition: opacity 500ms ease;
            opacity: 1;
        }
    </style>

    <script type="text/javascript">
        //set the array to the slide div's we have here
        var allSlides = document.getElementsByClassName("slide");

        var activeSlide = 0;//start at 0

        setInterval('autoSlide()', 4000);
        $(function () { //when the document is ready, wire up the click functions
            $(".slider-next").click(function () {

                if (activeSlide + 1 >= allSlides.length) {
                    allSlides[activeSlide].className =""; //remove any css class on this item
                    activeSlide = 0;
                    allSlides[0].className["active"]; //careful, these items maybe null 
                }
                else {
                    allSlides[activeSlide].className="";
                    activeSlide++;
                    allSlides[activeSlide].className="active";
                }
            });
            $(".slider-prev").click(function () {
                if (activeSlide - 1 < 0) {
                    allSlides[0].className ="";
                    activeSlide = allSlides.length - 1;
                    allSlides[activeSlide].className= "active";
                }
                else {
                    allSlides[activeSlide].className= "";
                    activeSlide--;
                    allSlides[activeSlide].className ="active";
                }
            });
        });
        function autoSlide() {
            if (activeSlide + 1 >= allSlides.length) {
                allSlides[activeSlide].className = "";
                activeSlide = 0;
                allSlides[0].className ="active";
            }
            else {
                allSlides[activeSlide].className = ""; 
                activeSlide++;
                allSlides[activeSlide].className ="active";
            }
        }
    </script>
</head>
<body>
    <div>
        <div class="slider-btn">
            <button class="slider-prev"><</button>
            <button class="slider-next">></button>
        </div>
        <div class="slider">
            <div class="slide active">
                <h2>Slide 1</h2>
            </div>
            <div class="slide">
                <h2>Slide 2</h2>
            </div>
        </div>
        <div>
            <p>Some other content here</p>
        </div>
        <div class="slider-btn">
            <button class="slider-prev"><</button>
            <button class="slider-next">></button>
        </div>
        <div class="slider">
            <div class="slide active">
                <h2>Slide 1</h2>
            </div>
            <div class="slide">
                <h2>Slide 2</h2>
            </div>
        </div>
        <div>
            <p>Some other content here</p>
        </div>
    </div>
</body>
</html>

jQuery多个滑块

1 个答案: