单击相关触发器时显示滑块的内容

Question

我正在处理滑块，我想在使用 eq() 函数单击相关触发器时将 class "active" 添加到滑块图像。我正在通过触发器索引访问图像，但它不起作用，真正的问题是什么？

$(document).ready(function() {
  
  setInterval(function set() {
  var nextItem = $('.item.active').slideDown().removeClass('active').next('.item');
  var nextTrigger = $('.trigger.active').removeClass('active').next('.trigger');
  
  if ((nextItem.length === 0) && (nextTrigger.length === 0)) {
   nextItem = $('.item').first();
   nextTrigger = $('.trigger').first()
  }

  nextItem.slideUp().addClass('active ');
  nextTrigger.addClass('active ');
 }, 5000);

  $(".images li:first").addClass("first");
  $(".images li:last").addClass("last");
  
  $(".next").click(function(e){
   e.preventDefault();
  
   if($(".images").find(".active").hasClass("last")){
    $(".images").find(".active").removeClass("active");
    $(".images li:first").addClass("active");
    $(".triggers").find(".active").removeClass("active");
    $(".triggers li:first").addClass("active");
   } else {
    $(".images").find(".active").removeClass("active").next().addClass("active");
    $('.trigger.active').removeClass('active').next().addClass('active');
   }
   
  });
  
  $(".prev").click(function(e){
   e.preventDefault();
   if($(".images").find(".active").hasClass("first")){
    $(".images").find(".active").removeClass("active");
    $(".images li:last").addClass("active");
    $(".triggers").find(".active").removeClass("active");
    $(".triggers li:last").addClass("active");
   } else {
    $(".images").find(".active").removeClass("active").prev().addClass("active");
    $('.trigger.active').removeClass('active').prev().addClass('active');
   }
   
  });
  
  
  $("ul.triggers li").click(function(e){
   e.preventDefault();
   if ( !$(this).hasClass('active')){
    $('.trigger.active').removeClass('active');
    $(this).addClass('active');
    $(".images").find(".active").removeClass("active");
    $(".images").eq($(this).index()).addClass("active");
   }
  });
  
  
 });

ul.images li img{
  width: 1000px;
  height: 500px;
  margin-left: 105px;
  
 }
 ul.images li {
  list-style: none;
  display: none;
 }
 ul.images li.active{
  display: block;
 }
 .controls{
  margin: 20px 0 0 500px;
 }
 .triggers li{
  list-style: none;
  display: inline;
  margin-left: 10px;
 }
 .triggers{
  display: inline;
  margin-right: 53px;
 }
 .triggers li a{
  text-decoration: none;
  color: black;
 }
 
 ul.triggers li.active {background-color:gray; color:white; width: 20px; height: 10px;}

<!DOCTYPE html>
 <html>
  <head>
   <script src="jquery/jquery.js" type="text/javascript"></script>
   <script src="jquery/slider.js" type="text/javascript" /></script>
   <link href="css/slider.css" type="text/css" rel="stylesheet">
  </head>
  <body>
   <div id="container">
      <ul class="images">
       <li class="item active"> <img src="images/1.jpg"> </li>
       <li class="item">  <img src="images/2.jpg"></li>
       <li class="item">  <img src="images/3.jpg"> </li>
       <li class="item">  <img src="images/4.jpg"> </li>
      </ul> 
    <div class="controls">
     <a href="" class="prev"> <img src="images/prev.png" width="30px" > </a>
     <ul class="triggers">
      <li class="trigger active"> <a href=""> 1 </a> </li>
      <li class="trigger"> <a href=""> 2 </a> </li>
      <li class="trigger"> <a href=""> 3 </a> </li>
      <li class="trigger"> <a href=""> 4 </a> </li>
     </ul>
     <a href="#" class="next"> <img src="images/next.png" width="30px" > </a>
    </div>
   </div>
  </body>
 </html>

Answer 1

嗯...从外观上看，您在 .images 上使用了 eq，但图像只有一个元素 class？大概可以试试改

$(".images").eq($(this).index()).addClass("active");

至

$(".item").eq($(this).index()).addClass("active");

编辑： 你可能想看看这个？ https://api.jquery.com/eq/

单击相关触发器时显示滑块的内容

show content of slider when related trigger is clicked

jquery

slider