如何在单页中设置可独立运行的多Slider组件？

你的问题核心在于全局选择器导致所有组件共享事件和操作对象：当前代码里的.pager .item1 a这类选择器会选中页面上所有匹配的元素，而$wrapSlide1也指向了所有.list_slider1元素，所以悬停任何一个pager都会触发所有滑块同步滑动。

要实现每个Slider独立响应，关键是让每个Pager只操作自己所属容器内的Slider，我们可以通过「父容器限定范围+相对选择器」来实现，同时还能简化重复的代码逻辑。

修改后的完整代码 #

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_slider">
  <ul class="list_slider">
    <li><div class="box">a1</div></li>
    <li><div class="box">a2</div></li>
    <li><div class="box">a3</div></li>
    <li><div class="box">a4</div></li>
    <li><div class="box">a5</div></li>
  </ul>
  <ul class="pager">
    <li><a href="#">show1</a></li>
    <li><a href="#">show2</a></li>
    <li><a href="#">show3</a></li>
    <li><a href="#">show4</a></li>
    <li><a href="#">show5</a></li>
  </ul>
</div>
<div class="wrap_slider">
  <ul class="list_slider">
    <li><div class="box">b1</div></li>
    <li><div class="box">b2</div></li>
    <li><div class="box">b3</div></li>
    <li><div class="box">b4</div></li>
    <li><div class="box">b5</div></li>
  </ul>
  <ul class="pager">
    <li><a href="#">show1</a></li>
    <li><a href="#">show2</a></li>
    <li><a href="#">show3</a></li>
    <li><a href="#">show4</a></li>
    <li><a href="#">show5</a></li>
  </ul>
</div>

CSS

*{ margin:0; padding:0; list-style:none }
.wrap_slider { 
  position:relative; 
  width:400px; 
  height:100px; 
  margin:0 0 10px 0; 
  overflow:hidden;
}
.list_slider { 
  position:absolute; 
  top:0; 
  left:0; 
  width:400px; 
}
.list_slider li { height:100px; }
.list_slider li .box { height:100px; background:#ccc;}
.pager { position:absolute; top:0; right:0; }
.pager a { 
  display:block; 
  width:50px; 
  height:19px; 
  margin:0 0 1px 0; 
  text-align:center; 
  color:#fff; 
  font-size:11px; 
  overflow:hidden; 
  background:#434444 
}
.pager a.active { color:#fff; background:#000}

JavaScript

// 遍历每个Slider容器，为内部的Pager绑定独立事件
$('.wrap_slider').each(function() {
  var $currentSlider = $(this).find('.list_slider');
  var slideHeight = 100; // 单个slide的高度，和CSS里保持一致

  // 为当前容器内的所有Pager项绑定hover事件
  $(this).find('.pager li a').hover(function() {
    // 获取当前Pager项的索引（从0开始）
    var index = $(this).parent().index();
    // 计算需要滑动的top值：-索引*单个slide高度
    var targetTop = -index * slideHeight;
    // 只操作当前容器内的Slider
    $currentSlider.stop(true).animate({ top: targetTop }, 'fast');
  });
});

关键改进点说明 #

1. 移除全局类名重复：把原来的list_slider1改成通用的list_slider，避免每个组件用不同类名的冗余，同时方便批量处理。
2. 父容器范围限定：通过$('.wrap_slider').each()遍历每个滑块容器，在内部只处理当前容器内的Pager和Slider，保证操作的独立性。
3. 动态计算滑动位置：利用index()获取当前Pager项的位置，结合单个slide的高度动态计算top值，避免了重复写5次几乎一样的hover事件，代码更简洁易维护。
4. 相对选择器使用：用$(this).find(...)在当前容器内查找元素，而不是全局查找，从根源上避免了跨组件的干扰。

这样修改后，每个Slider的Pager悬停操作只会影响自己内部的滑块，完全实现独立响应的需求。

内容的提问来源于stack exchange，提问作者user3061452