logo标签列表

如何为简单的 jQuery 滑块添加多个滑块支持？

javascriptjquery
6
我有一个使用jQuery实现的非常简单的滑块；它只支持一个滑块，我希望它能够支持同一页面上的多个滑块。
例如：在同一页上有滑块1、滑块2、滑块3等。
这里有一个可工作的示例working example。
我知道我需要使用each函数-我也尝试过了，但它停止工作了。我不知道我错在哪里。这是我尝试过的代码，因为代码太长了，所以我把它缩短了：
$('#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;   
   });  
});

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

“我想将其转换为支持多个滑块”，你是什么意思？如果您能提供一小段代码来展示它不起作用的地方，并澄清您想要实现的目标，那将非常有帮助。 - Gass
1
@Gass在问题中添加了更多的信息和演示链接。 - user1805543
1
id属性在HTML文档中必须是唯一的。目前，您有两个具有相同id的滑块。一旦您拥有两个具有不同id的单独滑块，您应该能够使其正常工作。 - Sajan
3个回答
8

只需使用.closest()和.find()方法遍历当前hover的元素。然后，您可以使用each循环迭代slider，并获取当前活动li的索引，根据位置使下一个li处于活动状态。

Demo Code：

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

1
非常感谢你，你救了我。我尝试了每一个查找函数来完成它，但是由于知识不足而无法完成。再次感谢。 - user1805543
3
   <html>
   <head>
   <title>Your slider in a simple web page</title>

   <style>
   body { background-color: #fff; color: #000; padding: 0; margin: 0; }
   .container { width: 900px; margin: auto; padding-top: 1em; }
   .container .ism-slider { margin-left: auto; margin-right: auto; }
   </style>

   <link rel="stylesheet" href="ism/css/my-slider.css"/>
   <script src="ism/js/ism-2.2.min.js"></script>

   </head>
   <body>
   <div class='container'>

   <div class="ism-slider" id="my-slider">
   <ol>
   <li>
  <img src="ism/image/slides/flower-729514_1280.jpg">
  <div class="ism-caption ism-caption-0">My slide caption text</div>
  </li>
  <li>
  <img src="ism/image/slides/beautiful-701678_1280.jpg">
  <div class="ism-caption ism-caption-0">My slide caption text</div>
  </li>
  <li>
  <img src="ism/image/slides/summer-192179_1280.jpg">
  <div class="ism-caption ism-caption-0">My slide caption text</div>
  </li>
  </ol>
  </div>
  <p class="ism-badge" id="my-slider-ism-badge"><a class="ism-link"
  href="http://imageslidermaker.com" rel="nofollow">generated with ISM</a></p>

  <section><h1>Your slider in a simple web page</h1>


  <p>This is a working example of your slider.</p>

  <p>To get your slider working in your web page add <em>my-slider.css</em>,    
  <em>ism-2.2.min.js</em> and the slide images to your project directory and paste 
  the markup into your HTML.</p>
  <p>Please see README.txt for more detailed instructions.</p>

  <p>* If your slider is not displayed correctly, please first make sure you have 
  fully extracted the contents of the zip file.</p>

  </section></div>
  </body>
  </html>

你可以从这里下载CSS/图片和JavaScript。注意：如果你选择免费下载文件，请选择慢速下载。
如果我想使用更好的模块，例如 Tiny Slider、Owl Carousel 等，周围有很多更好的选择。谢谢。 - user1805543
1

这是一个可工作的演示，但仍需要一些更新。我会继续努力编写代码，希望这能对您有所帮助。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
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;
}

.carousel-indicators1  {
  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-indicators1  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-indicators1  li:hover, .carousel-indicators1 li.active {
  background-color: red;
}
</style>
</head>
<body>
  <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><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" id="slider1" style="width: 40%;float:right;">
         <ul class="image-slide" id="image1" >
             <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-indicators1" id="buton">
           <li><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>
<script>
 $(function(){    
var Slider = 0;
$.Slider = function(total){
   $(".carousel-indicators li").removeClass("active");
   $("#image li").hide();
   if (Slider < total -1){
       Slider++;
         $(".carousel-indicators li:eq("+Slider+")").addClass("active");
         $("#image li:eq("+Slider+")").fadeIn("slow");                                    
       }else {
         $(".carousel-indicators li:first").addClass("active");
         $("#image li:first").fadeIn("slow");    
         Slider = 0;    
       }
   }

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

   $(".carousel-indicators li:first").addClass("active");
   $("#image li").hide();
   $("#image li:first").show();
   $(".carousel-indicators li").hover(function(){
      var indicators = $(this).index();
      $(".carousel-indicators li").removeClass("active");
      $(this).addClass("active");
      $("#image li").hide();
      $("#image li:eq("+indicators+")").fadeIn("slow");                                   
      Slider = indicators;
      return true;   
   });  
  
  
  var Slider1 = 0;
$.Slider = function(total1){
   $(".carousel-indicators1 li").removeClass("active");
   $("#image1 li").hide();
   if (Slider1 < total1 -1){
       Slider1++;
         $(".carousel-indicators1 li:eq("+Slider1+")").addClass("active");
         $("#image1 li:eq("+Slider1+")").fadeIn("slow");                                    
       }else {
         $(".carousel-indicators1 li:first").addClass("active");
         $("#image1 li:first").fadeIn("slow");    
         Slider1 = 0;    
       }
   }

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

   $(".carousel-indicators1 li:first").addClass("active");
   $("#image1 li").hide();
   $("#image1 li:first").show();
   $(".carousel-indicators1 li").hover(function(){
      var indicators1 = $(this).index();
      $(".carousel-indicators1 li").removeClass("active");
      $(this).addClass("active");
      $("#image1 li").hide();
      $("#image1 li:eq("+indicators1+")").fadeIn("slow");                                   
      Slider1 = indicators1;
      return true;   
   });  
  
});
</script>
</body>
</html>

谢谢你的回答，但我不想只是重复所有的代码两次，如果我想这样做的话，我可以做到。而且你的演示中两个滑块都没有工作。 - user1805543
没有问题，我不确定我是否正确理解了你的问题，你是想通过循环来创建滑块吗？ - Ahmed amin shahin
@Ahmedaminshahin 请看这个例子 https://codepen.io/nxworld/pen/kkRpJE 它支持多个滑块，但没有指示器和mouseenter mouseleave功能。 - user1805543
指标和鼠标中心是什么意思？ - Ahmed amin shahin
当你将鼠标移动到它上面时，你需要鼠标变成指针或指示器吗？ - Ahmed amin shahin
@Ahmedaminshahin（指标）意味着控件（点），简单的新闻滚动条很好，但没有指示器，mouseenter，mouseleave。我的滑块具有除多重支持外的所有功能。 - user1805543
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接