jquery内容滑块滑动

Question

这是滑块导航的html部分：

<div id="button">
     <a class="button1 active" rel="1" href="#"></a>
     <a class="button2" rel="2" href="#"></a>
     <a class="button3" rel="3" href="#"></a>
</div>

这是滑块的完整jQuery代码：

$(document).ready(function (){
  $('#button a').click(function(){
    var integer = $(this).attr('rel');
    /*----- Width of div mystuff (here 160) ------ */
    $('#myslide .cover').animate({left:-160*(parseInt(integer)-1)})
    $('#button a').each(function(){
      $(this).removeClass('active');
      if($(this).hasClass('button'+integer)){
        $(this).addClass('active')
      }
    });
  });   
});

我正在为大学的作业构建一个内容滑块，我无法遵循此代码。

您可以找到此滑块here的完整代码。

我们的3个链接具有值为1,2和3的rel属性。这行jQuery计算滑块的滑动量：

$('#myslide .cover').animate({left:-160*(parseInt(integer)-1)})

因此，如果变量integer为1，则为-160*(1-1)=0 - 滑块不会移动 如果它的2结果将是-160并且它将向右移动160px。 如果是3，它将向右移动320px。

此代码如何将幻灯片向左移动？ 如果你在页面上测试演示，它可以工作，但我不明白怎么做？ 有人可以向我解释一下吗？

Answer 1

左侧负值将使元素移动到0位置的左侧。当您从0到-160进行动画处理时，它将向左移动。

http://jsfiddle.net/vrRfu/

我误解了这个问题吗？

正整数乘以-160会导致左侧负位置，导致元素向左移动。

Answer 2

这张幻灯片中的秘诀是''，因为当你改变'overflow'属性来隐藏所有的东西时，你必须将三个段落放在同一行但是使div只有一个大小。出于意志消失所以它就像一扇窗户，只有你看到前面的东西，最后用'.animate（）'方法你可以把东西移到“窗口”的前面

Answer 3

如果你的整数是1并且你将它移到左边，你的公式将是（-160）* - 1-1，这将给你-320（向左移动滑块）。如果是正数，则将乘以正数，将滑块向右移动。

希望有所帮助。