html - html5 / jQuery Slider - 滑动到相关答案（带有后退按钮）

Question

我必须使用 jQuery 在 HTML5 中创建一个页面，其中所有问题都将以表格的形式出现。通过点击一个特定的问题 - 它的答案应该会出现滑动；关闭该答案后，滑块应返回并出现问题。

这怎么可能？我应该使用<div>值还是从中获取XML？请指导您的建议和教程。

Answer 1

这是有关如何执行此操作的原始示例：

演示 jsBin

你需要这个 HTML 结构：

<div class="slider_container"> <!-- overflow:hidden; -->
<div class="slider">  <!-- position:absolute;width:loooot; -->

  <div class="box">
      <h2>Questions</h2>
      <ul class="goto">
        <li>Question 1</li>
        <li>Question 2</li>
        <li>Question 3</li>
        <li>Question 4</li>
      </ul>
  </div>
  <div class="box"><h2>ANSWER 1<span class="back">&lt; back</span></h2>box text...</div>
  <div class="box"><h2>ANSWER 2<span class="back">&lt; back</span></h2>box text...</div>
  <div class="box"><h2>ANSWER 3<span class="back">&lt; back</span></h2>box text...</div>
  <div class="box"><h2>ANSWER 4<span class="back">&lt; back</span></h2>box text...</div>

</div>
</div>

这个基本的jQuery：

var galW = 600; // set here the 'slider container' width

$('ul.goto li').on('click',function(e){
  e.preventDefault();
  var thisIndex = $(this).index()+1;  
  $('.slider').stop(1).animate({left: -(galW*thisIndex)}, 1000);  
});

$('span.back').on('click',function(){
  $('.slider').stop(1).animate({left: 0}, 1000); 
});

我们在这里所做的是：获取被点击元素的索引Nli +1。
+1 因为我们已经在查看第一个框（带有问题），但所有其他.box元素的索引将 +1。

在我们得到这个数字之后，我们只是以“速度”（时间）1000 为滑块设置动画，做一些简单的数学运算：我们将得到的索引N乘以“视口”宽度。

要返回，我们只需将.slider背部动画到left:0px（或只是'0'）位置。

如果你不明白我使用的一些方法，你可以在这里找到它们：http: //api.jquery.com/

（请下次在提出您的问题时表现出一些努力，以便我们可以查看您的一些代码。谢谢！编码愉快）