这是对您的代码的更新：

$(".pager li a").hover(function() {
  var slider = $(this).closest('.wrap_slider').find('.list_slider1');
  var animateTo = $(this).attr('data-animateto');
  slider.stop(true).animate({
    top: animateTo
  }, 'fast');
});

$('.pager a').hover(function(){   
    $('.pager a').removeClass('active');
    $(this).addClass('active');
 });   

* {
  margin: 0;
  padding: 0;
  list-style: none
}

.wrap_slider {
  position: relative;
  width: 400px;
  height: 100px;
  margin: 0 0 10px 0;
  overflow: hidden;
}

.list_slider1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
}

.list_slider1 li {
  height: 100px;
}

.list_slider1 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
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_slider">
  <ul class="list_slider1">
    <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 class="item1"><a href="#" data-animateto="0">show1</a></li>
    <li class="item2"><a href="#" data-animateto="-100">show2</a></li>
    <li class="item3"><a href="#" data-animateto="-200">show3</a></li>
    <li class="item4"><a href="#" data-animateto="-300">show4</a></li>
    <li class="item5"><a href="#" data-animateto="-400">show5</a></li>
  </ul>
</div>






<div class="wrap_slider">
  <ul class="list_slider1">
    <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 class="item1"><a href="#" data-animateto="0">show1</a></li>
    <li class="item2"><a href="#" data-animateto="-100">show2</a></li>
    <li class="item3"><a href="#" data-animateto="-200">show3</a></li>
    <li class="item4"><a href="#" data-animateto="-300">show4</a></li>
    <li class="item5"><a href="#" data-animateto="-400">show5</a></li>
  </ul>
</div>

我所做的是，或者为每个滑块函数编写单独的代码以使滑块工作。已创建要调用的单个函数，并且执行导航的参数在 html 调用程序中定义。因此，通过这种方式，它会更灵活一些。

EDIT 1

至于您所要求的，如果您想完全从脚本方面执行此操作，则需要为 animation 创建一个 array ，并且必须将其与页面上的幻灯片进行映射。

因此，您的脚本将如下所示：

//here below is my array which holds the animation values 
var animateTo = [0, -100, -200, -300, -400];
$(".pager li a").hover(function() {             
  var slider = $(this).closest('.wrap_slider').find('.list_slider1');
  var sliderIndex = $(this).parent().index();//index of each slde element
  var animation = animateTo[sliderIndex]; //mapping the slide to its equivalent value in animationTo array
  slider.stop(true).animate({
         top: animation
  }, 'fast');
});

您只需确保每个滑块的 ID 和类都是唯一的，如下所示：

HTML：

<div class="wrap_slider"> 
    <ul class="list_slider2">
        <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="pager2">
        <li class="item1"><a href="#">show1</a></li>
        <li class="item2"><a href="#">show2</a></li>
        <li class="item3"><a href="#">show3</a></li>
        <li class="item4"><a href="#">show4</a></li>
        <li class="item5"><a href="#">show5</a></li>
  </ul>

CSS：

*{ margin:0; padding:0; list-style:none }

 .wrap_slider { position:relative; width:400px; height:100px; margin:0 0 
 10px 0; overflow:hidden;}

 .list_slider1,.list_slider2 { position:absolute; top:0; left:0; 
 width:400px; }
 .list_slider1 li,.list_slider2 li { height:100px; }
 .list_slider1 li .box,.list_slider2 li .box { height:100px; 
 background:#ccc;}

 .pager,.pager2 { position:absolute; top:0; right:0; } 
 .pager a,.pager2 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,.pager2 a.active { color:#fff; background:#000} 

JavaScript：

 var $wrapSlide1 = $('.list_slider1');
$(".pager .item1 a").hover(function(){
    $wrapSlide1.stop(true).animate({ top:0}, 'fast');  
});
$(".pager .item2 a").hover(function(){
    $wrapSlide1.stop(true).animate({ top:-100}, 'fast'); 
});
$(".pager .item3 a").hover(function(){
    $wrapSlide1.stop(true).animate({ top:-200}, 'fast'); 
});
$(".pager .item4 a").hover(function(){
    $wrapSlide1.stop(true).animate({ top:-300}, 'fast'); 
});
$(".pager .item5 a").hover(function(){
    $wrapSlide1.stop(true).animate({ top:-400}, 'fast'); 
});  

var $wrapSlide2 = $('.list_slider2');
$(".pager2 .item1 a").hover(function(){
    $wrapSlide2.stop(true).animate({ top:0}, 'fast');  
});
$(".pager2 .item2 a").hover(function(){
    $wrapSlide2.stop(true).animate({ top:-100}, 'fast'); 
});
$(".pager2 .item3 a").hover(function(){
    $wrapSlide2.stop(true).animate({ top:-200}, 'fast'); 
});
$(".pager2 .item4 a").hover(function(){
    $wrapSlide2.stop(true).animate({ top:-300}, 'fast'); 
});
$(".pager2 .item5 a").hover(function(){
    $wrapSlide2.stop(true).animate({ top:-400}, 'fast'); 
});  

$('.pager a').hover(function(){   
    $('.pager a').removeClass('active');
    $(this).addClass('active');
});   
$('.pager2 a').hover(function(){   
    $('.pager2 a').removeClass('active');
    $(this).addClass('active');
});  

如果这里需要可重用性，您应该了解如何利用此上下文。

这是有点糟糕的代码，但您可以使用它

$(".pager .item1 a").hover(function(){
let $wrapSlide1 = $(this).parent().parent().parent().find('.list_slider1');
    $wrapSlide1.stop(true).animate({ top:0}, 'fast');  
});
$(".pager .item2 a").hover(function(){
    var $wrapSlide1 = $(this).parent().parent().parent().find('.list_slider1');
    $wrapSlide1.stop(true).animate({ top:-100}, 'fast'); 
});
$(".pager .item3 a").hover(function(){
    let $wrapSlide1 = $(this).parent().parent().parent().find('.list_slider1');
    $wrapSlide1.stop(true).animate({ top:-200}, 'fast'); 
});
$(".pager .item4 a").hover(function(){
    let $wrapSlide1 = $(this).parent().parent().parent().find('.list_slider1');
    $wrapSlide1.stop(true).animate({ top:-300}, 'fast'); 
});
$(".pager .item5 a").hover(function(){
    let $wrapSlide1 = $(this).parent().parent().parent().find('.list_slider1');
    $wrapSlide1.stop(true).animate({ top:-400}, 'fast'); 
});  

$('.pager a').hover(function(){   
    $('.pager a').removeClass('active');
    $(this).addClass('active');
});   

JS Fiddle 在这里： https://jsfiddle.net/zg9og7re/