如何在一个页面中设置多个滑块？

Question

＆＃13;

＆＃13;

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'); 
    }); 

＆＃13;

*{ 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} 

＆＃13;

<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="#">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>
</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="#">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>
</div>

＆＃13;

＆＃13;

＆＃13;

我制作了一个滑块，当鼠标悬停在寻呼机上然后滑动图像。 我想在一个页面上使用该滑块3次或更多次。

问题是如果我使用多滑块，当鼠标悬停在寻呼机上时，所有滑块都会同时移动..如何让它移动每个滑块？

这是我在这里尝试的 https://fiddle.jshell.net/wkpjhwag/1/

Answer 1

以下是对您的代码的更新：

＆＃13;

＆＃13;

$(".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');
 });   

＆＃13;

* {
  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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我所做的是为每个滑块功能编写单独的代码，以使滑块工作。创建了一个要调用的函数，并在html调用者中定义了导航参数。所以，通过这种方式它会更灵活。

  

编辑1

至于你提出的问题，如果你想从脚本方面完全做到这一点，那么你需要为array设置一个animation，并且必须与你的幻灯片一起映射页。

所以，你的脚本看起来像这样：

//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');
});

Answer 2

你必须确保每个滑块的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');
});  

Answer 3

如果此处需要可重用性，您应该查看如何利用此上下文。

这是很糟糕的代码，但你可以使用这个

$(".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小提琴：https://jsfiddle.net/zg9og7re/

Answer 4

只需将$wrapSlide1替换为$(this).closest('div[class^="wrap_slider"]').children(".list_slider1")

即可

var $wrapSlide1 = $('.list_slider1');
	$(".pager .item1 a").hover(function(){
  $(this).closest('div[class^="wrap_slider"]').children(".list_slider1").stop(true).animate({ top:0}, 'fast');  
	});
	$(".pager .item2 a").hover(function(){	       $(this).closest('div[class^="wrap_slider"]').children(".list_slider1").stop(true).animate({ top:-100}, 'fast'); 
	});
	$(".pager .item3 a").hover(function(){
$(this).closest('div[class^="wrap_slider"]').children(".list_slider1").stop(true).animate({ top:-200}, 'fast'); 
	});
	$(".pager .item4 a").hover(function(){
$(this).closest('div[class^="wrap_slider"]').children(".list_slider1").stop(true).animate({ top:-300}, 'fast'); 
	});
	$(".pager .item5 a").hover(function(){
$(this).closest('div[class^="wrap_slider"]').children(".list_slider1").stop(true).animate({ top:-400}, '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="#">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>
</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="#">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>
</div>