Question

我正在尝试制作滑动div。

我成功地将第一个div转到第二个div，反之亦然。

但是，我无法将第二个div滑到第3个div。

j查询代码如下：

$(function(){

  var slideW = $('#slides').width();
  
  // Next slide
  $('#next-slide').click(function( e ){
    e.preventDefault(); 
    $('#slides').animate({scrollLeft: slideW}, 600);
  });
  
  //previous slide
    $('#back-slide').click(function( e ){
    e.preventDefault();
    $('#slides').animate({scrollLeft: -slideW }, 600);
  });
  
});

#slides{  
  position:relative;
  overflow:hidden;
  margin:0 auto;
  background:#cf5;
  width:100%;
  height:200px;
  white-space:nowrap;
}
#slides div{
  position:relative;
  display:inline-block;
  margin-right:-4px;
  white-space:normal;
  vertical-align:top;
  *display:inline;
  background:#eee;
  width:100%;
  height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slides">
  <div>
    Content 1
    <a href="#" id="next-slide">Show Content 2 .. it works!</a>
  </div>
  
  <div>
  Content 2
    <a href="#" id="back-slide">Show Content 1 .. it works!</a>
	<br>
	<a href="#" id="next-slide">Show Content 3 .. not working!!</a>
  </div>
  
  <div>
  Content 3
    <a href="#" id="back-slide">Show Content 2 .. not working!!</a>
  </div>

</div>

Answer 1

＆＃13;

$(function(){
  
  var $slide = $("#slides");      // Cache the elements you plan to reuse!
  var $pages = $slide.children(); // Get the actual slides pages
  var slideW = $slide.width();
  var c = 0;                      // Use a counter
  
  // Use classes instead of ID!
  $('.prev, .next').click(function( e ){
    c = $(this).is(".next") ? ++c : --c;             // incr/decr. counter
    $slide.animate({scrollLeft: slideW * c }, 600);  // Anim by multiplying
  });
  
});

＆＃13;

#slides{  
  position:relative;
  overflow:hidden;
  margin:0 auto;
  background:#cf5;
  width:100%;
  height:200px;
  white-space:nowrap;
}
#slides div{
  position:relative;
  display:inline-block;
  margin-right:-4px;
  white-space:normal;
  vertical-align:top;
  *display:inline;
  background:#eee;
  width:100%;
  height:200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slides">
  <div>
    Content 1
    <a href="#" class="next">Show Content 2 .. it works!</a>
  </div>
  
  <div>
  Content 2
    <a href="#" class="prev">Show Content 1 .. it works!</a>
	<br>
	<a href="#" class="next">Show Content 3 .. not working!!</a>
  </div>
  
  <div>
  Content 3
    <a href="#" class="prev">Show Content 2 .. not working!!</a>
  </div>

</div>

＆＃13;

回顾：
而不是总是将动画设置为固定的+ - 宽度slideW，上面使用的变量c分别在每次上/下一次点击时递增/递减。乘以幻灯片显示宽度，您将获得scrollLeft位置。

这里是数学（slideW例如200）

C * slideW = scrollLeft
-------------------------------
0 * 200    = 0
1 * 200    = 200
2 * 200    = 400
3 * 200    = 600
etc...

Answer 2

您不能在HTML页面中添加相同的 ID ...

Answer 3

实际上，在这个特定的上下文中，你可以只为scrollLeft增加（或减少）值（我会说更简单的解决方案）：

var slideW = $('#slides').width();


  // Next slide
  $('.next-slide').click(function( e ){
    e.preventDefault(); 

    $('#slides').animate({scrollLeft:"+="+slideW}, 600);
  });

  //previous slide
    $('.back-slide').click(function( e ){
    e.preventDefault();
    $('#slides').animate({scrollLeft: "-="+slideW }, 600);
  });

问题是你的scrollLeft值总是静态的，这是动态的。

演示：https://jsfiddle.net/x7p65b1v/1/

当然，使用class for next / prev按钮。

使用jQuery制作滑动div

3 个答案: