时间戳

首页 > 解决方案 > 如何在一页中设置多个滑块？

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

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

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

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

标签： javascriptjquery

解决方案

这是您的代码的更新：

$(".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调用者中定义了进行导航的参数。所以，通过这种方式，它更灵活一些。

编辑 1

至于您所问的，如果您想完全从脚本方面做到这一点，那么您需要有一个arrayforanimation并且必须与您页面上的幻灯片映射。

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

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

推荐阅读