无限平滑水平滚动没有插件?
我想创建一个无限的侧滚动div,而不使用额外的插件(除了jQuery)。 我找到了这个:http://www.smoothdivscroll.com/
问题不仅是它自己的插件,它还利用jqueryUI ...添加一堆代码重量。
这是我的
<div id="columnWrapper">
<div id="columnSlider">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</div>
对于javascript,我有一个计时器设置为每10毫秒,每次处理#columnScroll的左边距几个像素。
var sliderInt=self.setInterval(function(){
$('#columnSlider').css('margin-left',totalMargin);
totalMargin -= .5;
},10);
我真正需要的是#columnSlider的左侧和同一个div的右侧,一旦左侧离开屏幕就会结束(这样它就会无限滚动)。
提前致谢
你可以尝试这样的事情,它实际上是一个我为了重用而编写的插件,但你可以像下面那样将它从插件形式中取出,你只需要添加正确的元素并更改元素引用,我认为这是当前的垂直滚动,但 - 易于更改:
function initInfiniteScroll(){
var $carousel, $prevTrigger, $nextTrigger, itemHeight;
$carousel = $('#alternate-views');
$prevTrigger = $('.scroll-up');
$nextTrigger = $('.scroll-down');
itemHeight = 106;
$allItems = $carousel.children().clone();
$allItems.appendTo($carousel);
$allItems.prependTo($carousel);
$prevTrigger.click(function() {
scrollCarousel('up');
return false;
});
$nextTrigger.click(function() {
scrollCarousel();
return false;
});
function scrollCarousel(direction) {
if (direction == 'up')
{
$carousel.animate({
'top': '+=' + itemHeight
},1000,function(){
$carousel.children(':last').clone().prependTo($carousel);
$carousel.children(':last').remove();
$carousel.css({'top':'-' + itemHeight + 'px'});
});
}
else
{
$carousel.animate({
'top': '-=' + itemHeight
},1000,function(){
$carousel.children(':first').clone().appendTo($carousel);
$carousel.children(':first').remove();
$carousel.css({'top':'-' + itemHeight + 'px'});
});
}
}
}
这确实克隆了整个负载并将它放在原始滚动条的任一侧 - 但是您可以删除它,如果您使用的是jquery 1.4以上版本,则可以删除克隆并在您滚动时分离并重新添加项目。
另外 - 如果你想做一个setTimeout,只需使用click函数的内容并在其周围放置一个计时器即可。 希望这可以帮助。
链接地址: http://www.djcxy.com/p/8743.html