Question

尝试制作一个滑动面板，您可以在其中单击“下一步”和“返回”以在窗格之间移动，我附上了一个小提琴来解释得更好，只有我的后退按钮似乎没有用，有人能看出原因吗？

Answer 1

你必须稍微修改你的代码

$(document).ready(function(){
  $('a.next').click(function(){  
    $('.slide').animate({"left": "-=400"}, 500);
  })
  $('a.back').click(function(){  
    $('.slide').animate({"left": "+=400"}, 500);
  })
});

.form-slides {width:400px; overflow:hidden; border: 1px solid #ccc; margin: 25px}
.wrap { width: 9999px; }
.slide {width:400px; float:left; position: relative; background:#eee;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="form-slides">
  <div class="wrap">

    <div class="slide">
      <p>Lipsum blah blah blah</p>
      <a href="#" class="next">Next</a> 
      <a href="#" class="back">back</a> 
    </div>
    <div class="slide">
      <p>Lipsum blah blah blah</p>
      <a href="#" class="next">Next</a> 
      <a href="#" class="back">back</a> 
    </div>
    <div class="slide">
      <p>Lipsum blah blah blah</p>
      <a href="#" class="next">Next</a> 
      <a href="#" class="back">back</a> 
    </div>

  </div>
</div>

Answer 2

它似乎不起作用，因为您正在幻灯片1顶部移动幻灯片2，但单击幻灯片2中的后退按钮会操作幻灯片1.当幻灯片2保持在原位并位于顶部时。

这可能是你想要的： http://jsfiddle.net/ZuWeJ/

单击按钮上的动画滑动div，.prev .next jQuery

2 个答案: