javascript - 如何为简单的 jquery 滑块添加多个滑块支持？

Question

我有一个非常简单的带有 jquery 的滑块；它只支持一个滑块，我想让它支持同一页面上的多个滑块。

示例：同一页面上的滑块 1、滑块 2、滑块 3 等。

一个工作片段在这里工作示例。

我知道我必须使用每个功能——我确实做到了——但它停止了工作。我不知道我哪里错了。这就是我尝试过的；代码太长，所以我缩短了它：

$('#slider').each(function() {
  var current_slider = $(this);
  //slider codes in here 
});

这是我的完整代码：

$(function(){    
var Slider = 0;
$.Slider = function(total){
   $("#indicator li").removeClass("active");
   $("#image li").hide();
   if (Slider < total -1){
       Slider++;
         $("#indicator li:eq("+Slider+")").addClass("active");
         $("#image li:eq("+Slider+")").fadeIn("slow");                                    
       }else {
         $("#indicator li:first").addClass("active");
         $("#image li:first").fadeIn("slow");    
         Slider = 0;    
       }
   }

   var totalLi = $("#indicator li").length;
   var interval = setInterval('$.Slider('+totalLi+')',5000);
   $("#slider").hover(function(){
      clearInterval(interval);
   },function(){
      interval = setInterval('$.Slider('+totalLi+')',5000);    
   });

   $("#indicator li:first").addClass("active");
   $("#image li").hide();
   $("#image li:first").show();
   $("#indicator li").hover(function(){
      var indicators = $(this).index();
      $("#indicator li").removeClass("active");
      $(this).addClass("active");
      $("#image li").hide();
      $("#image li:eq("+indicators+")").fadeIn("slow");                                   
      Slider = indicators;
      return true;   
   });  
});

我不想为每个滑块重复相同的代码。我希望它支持像这个例子这样的多个滑块；该示例使用每个函数来获取所有滑块，但其中没有mouseenter和mouseleave和指示符。

标签： javascriptjquery

Answer 1

只需使用.closest()and.find()方法遍历当前元素是 hover 。然后，您可以使用each循环遍历滑块并获取当前活动 li 的索引，并根据位置使下一个 li 活动。

演示代码：

$(function() {
  $.Slider = function(total) {
  //loop through all slider
    $(".slider-holder").each(function() {
      var index = $(this).find(".carousel-indicators .active").index() + 1; //get index of active ..class + 1 
      $(this).find(".carousel-indicators li").removeClass("active");
      $(this).find(".image-slide li").hide();
      if (index < total) {
        $(this).find(".carousel-indicators li:eq(" + index + ") ").addClass("active");
        $(this).find(".image-slide li:eq(" + index + ")").fadeIn("slow");
      } else {
        $(this).find(".carousel-indicators  li:eq(0)").addClass("active");
        $(this).find(".image-slide li:eq(0)").fadeIn("slow");
      }
    })
  }

  var totalLi = $(".slider-holder:eq(0) .carousel-indicators li").length;
  var interval = setInterval('$.Slider(' + totalLi + ')', 5000);
  $(".slider-holder").hover(function() {
    clearInterval(interval);
  }, function() {
    interval = setInterval('$.Slider(' + totalLi + ')', 5000);
  });

  $(".carousel-indicators li").hover(function() {
    var indicators = $(this).index();
    var selector = $(this); //current li hover...
    selector.closest(".carousel-indicators").find("li").removeClass("active"); // to add clas..
    selector.addClass("active");
    selector.closest(".slider-holder").find(" .image-slide > li").hide();
    selector.closest(".slider-holder").find(".image-slide > li:eq(" + indicators + ")").fadeIn("slow");
    return true;
  });
});

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

.slider-holder {
  width: 50%;
  height: 300px;
  float: left;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 5px;
  background-color: #000;
}

.slider-holder ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.slider-holder .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

.carousel-prev {
  position: absolute;
  top: 50%;
  left: 30px;
  margin-top: -15px;
  z-index: 10;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.carousel-next {
  position: absolute;
  top: 50%;
  right: 30px;
  margin-top: -15px;
  z-index: 10;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.carousel-indicators {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  padding: 0;
  margin-right: 1%;
  margin-bottom: 10px;
  margin-left: 1%;
  list-style: none;
}

.carousel-indicators li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  text-indent: 0;
  cursor: pointer;
  background-color: rgba(15, 15, 20, 0.7);
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.9;
  transition: opacity 0.6s ease;
}

.carousel-indicators li:hover,
.carousel-indicators li.active {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="slider-holder" id="slider">
  <ul class="image-slide" id="image">
    <li>
      <div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
  </ul>
  <ul class="carousel-indicators" id="buton">
    <li class="active"><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
  </ul>
</div>



<h1> Second slider </h1>
<div class="slider-holder" style="width: 40%;float:right;">
  <ul class="image-slide">
    <li>
      <div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
  </ul>
  <ul class="carousel-indicators">
    <li class="active"><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
  </ul>
</div>