在jQuery中连续滚动Div

时间:2012-01-17 04:55:43

标签: javascript jquery html css

我创建了jquery滑块,当我单击下一个箭头时,它会滑动下一个图像。现在我需要连续显示它。(即)如果到达滑块中的最后一个图像。然后第一个图像应该从右侧滚动。因为我试过jquery追加。它正在追加。但是当我打印位置时,它会显示旧位置。而不是附加位置。

<div id="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
(i.e)//jQuery
numberOfSlides = 4; //Total no of images
$('arrow').click(function(){
if(currentSlide == 2) //if i am in the second slide, then append first slide to the last slide
{
   $('first-child').append('parent'); // This code is for reference. not in correct syntax.
}
else
{
  for()//loop
  { 
    //sliding all images to the left (i.e)if the image width is 800px. then the slide animation will be  -800,0,800,1600 for(slide1,slide2,slide3,slide4).so that second image will show now.
   $('.child:nth-child('+loop_count+')').animate({'marginLeft','xxpx'});
  }
}
currentSlide++;
});

currentSlide 2为-800,0,800,1600时的正确o / p(slide2,slide3,slide4,slide1) 在上面的代码中,如果condition将第一个元素追加到父元素。但是当我得到附加元素的位置时,它会打印一些-1600像素(当我用萤火虫检查时,它显示右侧的div)。但它应该是1600px;我使用marginLeft进行定位。

谢谢

1 个答案:

答案 0 :(得分:1)

http://archive.plugins.jquery.com/project/aautoscroll

您需要复制内容元素并将它们对齐,使它们彼此垂直相邻,并将它们串联滚动。您当前的滚动应该有效,跳转将是不可见的,因为它应该从底部元素的顶部跳到顶部元素的顶部,也就是说,跳到相同的部分。我将内容的两个副本(你可以只是.clone来获取另一个副本)放在一个容器中并滚动它,这样你就不必担心移动两个元素了。

如果你想真正优化它,你只能在底部元素中显示内容的顶部(足以隐藏跳转),但除非你的内容非常复杂和沉重,否则不值得付出努力。 / p>