jQuery的内容滑块滑动

这是滑块导航的HTML部分：jQuery的内容滑块滑动

<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的jQuery的这条线计算多少会滑块滑动相对属性：

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

所以，如果变量整数1这将是-160*(1-1)=0 - 中滑块不会移动如果它的2结果将是-160，它将向右移动160px。如果它的3它将向右移动320px。

此代码如何将幻灯片向左移动？如果您在页面上测试演示程序，它会起作用，但我不明白如何？有人可以向我解释吗？

来源

2012-07-18 Damir

负的左值将导致元素移动到0位置的左侧。当您从0到-160设置动画时，它会向左移动。

http://jsfiddle.net/vrRfu/

我误解了问题？

enter image description here

乘以-160结果为负左位置，使元件的正整数向左移动。

来源

2012-07-18 21:49:23

我不明白他们是如何移动到左侧，如果整数变量可以在任何时候只有1,2或3？ – Damir 2012-07-19 08:11:27

如果整数是1，则左边的位置将是0.如果整数是2，则左边的位置将是-160。如果整数是3，则左边的位置将是-320。那些负面的左边位置会导致它离开它的开始位置。 – 2012-07-19 14:22:46

由于您只是在位置上进行水平变更，因此以下链接中的图表显示了发生的情况。 http://en.wikipedia.org/wiki/File:Number-line.gif – 2012-07-19 14:25:34

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

来源

2012-07-18 22:03:09

我明白如何使用溢出显示div：隐藏但我不明白的是他们如何移动到左侧，如果整数变量可以在任何时候只有1,2或3？ – Damir 2012-07-19 08:11:11

你正在减去一个并将它乘以圆柱宽度，所以当integer = 1 left = -160 *（1-1）= 0时，所以在第一个位置没有向左移动，integer = 2 left = - 160（2-1）= 160，将整个160段像素向左移动，使动画更改为第二段。 – 2012-07-19 15:52:40

如果你的整数是1，你将它移动到左边，那么你的公式就是（-160）* - 1-1，这会给你-320（将滑块向左移动）。如果它是肯定的，你会乘以一个正数，将滑块向正确的方向移动。

希望有所帮助。

来源

2012-07-19 15:53:14

jQuery的内容滑块滑动

回答

相关问题