简体   繁体   English

在jQuery中连续滚动Div

[英]Scrolling Div Continuously in jQuery

I have created jquery slider that will slide a next image when i click the next arrow. 我创建了jquery滑块,当我单击下一个箭头时,它将滑动下一个图像。 Now i need to show it continuously.(ie) If a reach the last image in a slider. 现在,我需要连续显示它。(即)如果到达滑块中的最后一个图像。 Then the first Image should scroll from the right. 然后,第一个图像应从右侧滚动。 for that i tried jquery append. 为此,我尝试了jQuery追加。 it's appending. 它正在追加。 But when i print the position it shows the old position.not the appended position. 但是当我打印位置时,它显示的是旧位置,而不是附加位置。

<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++;
});

The correct o/p when currentSlide 2 is -800,0,800,1600 for(slide2,slide3,slide4,slide1) In the above code if condition will append the first element to the parent element. 当currentSlide 2为(slide2,slide3,slide4,slide1)的-800,0,800,1600时正确的o / p在上面的代码中,如果条件将第一个元素附加到父元素。 But when i get the position of the appended element it is printing some -1600 px(when i check with the firebug,it is showing the div on the right side). 但是,当我得到附加元素的位置时,它正在打印-1600像素(当我检查萤火虫时,它在右侧显示了div)。 but it should be 1600px; 但应为1600px; I am using marginLeft for positioning. 我正在使用marginLeft进行定位。

Thanks 谢谢

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

or 要么

You'll need to duplicate your content element and align them so that they're vertically next to each other, and scroll them in tandem. 您需要复制内容元素并对齐它们,以使它们在垂直方向上彼此相邻,然后串联滚动它们。 Your current scrolling should work, the jump will be invisible because it should jump from the top of the bottom element to the top of the top element, that is, to a same-looking part. 您当前的滚动应该起作用,该跳转将是不可见的,因为它应从底部元素的顶部跳转到顶部元素的顶部,即跳转到外观相同的部分。 I'd put both copies of the content (you can just .clone it to get the other copy) in a container and scroll that, that way you don't have to worry about moving two elements. 我将内容的两个副本(您可以将其复制以获取另一个副本)放在一个容器中并对其进行滚动,这样就不必担心移动两个元素。

If you want to really optimize it, you could only display the top part (enough to hide the jump) of the content in the bottom element, but unless your content is really complex and heavy, it's not worth the effort. 如果要真正对其进行优化,则只能在底部元素中显示内容的顶部(足以隐藏跳转),但是除非您的内容确实非常复杂且繁琐,否则就不值得这样做。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM