我在jsFiddle上有一个项目:

jsFiddle链接

JavaScript的:

var scroller = function() {
    $('#holder div').animate({
        left: ($t.attr('id') == 'prev' ? '-=' : '+=') + 3
    }, 10, 'linear', function() {
        if ($(this).position().left < -$('li:first-child', this).width()) {
            w = $('li:first-child', this).totalWidth();
            $('li:first-child', this).appendTo('ul', this);
            $(this).css('left', $(this).position().left + w);
        }
    });
};

$.fn.extend({
    totalWidth: function() {
        return this.outerWidth() + parseInt(this.css('margin-left'), 10) + parseInt(this.css('margin-right'), 10);
    }
});
wdth = 0;
$('#marquee ul li').each(function() {
    wdth += $(this).totalWidth();
});
$('#holder div').width(wdth);
var to;
$('#prev, #next').css('top', ($('#marquee').outerHeight() - $('#prev').outerHeight()) / 2).live('mousedown mouseup', function(e) {
    $t = $(this);
    if (e.type == 'mousedown') {
        to = setInterval(scroller, 15);
    }
    else {
        clearInterval(to);
    }
});

HTML:

<div id="marquee">
    <div id="prev"><</div>
    <div id="next">></div>
    <div id="holder">
        <div>
        <ul>
            <li>Part 1</li>
            <li>Part 2</li>
            <li>Part 3</li>
            <li>Part 4</li>
            <li>Part 5</li>
            <li>Part 6</li>
            <li>Part 7</li>
            <li>Part 8</li>
            <li>Part 9</li>
            <li>Part 10</li>
        </ul>
    </div>
    </div>
</div>

CSS:

* {
    font-family: verdana;
    font-size: 12px;
}
#marquee {
    top: 50px;
    position: relative;
    width: 80%;
    height: 34px;
    background-color: #CCC;
    margin: 0 auto;
    padding: 0;
}
#holder {
    overflow: hidden;
position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;
}
#holder div {
    position: absolute;
}
#marquee ul li {
    display: inline-block;
    float: left;
    margin-left: 5px;
    padding: 5px 7px;
    background-color: #555;
}
#marquee ul li:nth-child(2n+1) {
background-color: #888;
}
#marquee ul li:first-child {
    margin-left: 0;
}
#prev, #next {
    position: absolute;
    top: 10px;
    background-color: #66F;
    padding: 2px;
    cursor: pointer;
    z-index: 9002;
}
#prev {
    left: -13px;
    border-radius: 5px 0 0 5px;
}
#next {
    right : -13px;
    border-radius: 0 5px 5px 0;
}

我想要实现的是在mousedown上滚动一个循环,在mouseup上停止。

我已经能够使其滚动并循环播放,但是每次循环更改时它都会“跳转”。

有人有什么想法吗?


我已经编辑了小提琴以删除CSS规则,还稍微编辑了代码。

最初,当它向左滚动时,它跳回了约20像素,而CSS规则使它看起来更糟!

动画也会在10毫秒内继续播放,但由于每过15秒钟就会循环播放一次,因此动画每15毫秒播放一次。

右边不会循环,因为既然我不知道该怎么做,我不会浪费时间使它在正确准备好时可以正确地滚动,而错误地向右滚动。

我没有使用插件,因为我想自己学习(固执!)

===============>>#1 票数:1 已采纳

分叉你的小提琴,并添加了代码a)消除滚动时的跳动,b)检查向右滚动(下一个)并将第一个<li>到列表的末尾(如果有空格)

检查此小提琴: http : //jsfiddle.net/CRy4Q/15/

  ask by Andrew Willis translate from so

未解决问题?本站智能推荐:

2回复

jQuery无尽的动画

我正在制作一个无休止的jquery动画,它绘制了6个div并通过persition交换它们。 (更好地看一下链接)div的位置保存在一个数组中,每个循环,其元素都被转换为一个位置。 动画已经准备就绪,我遇到的问题是,我真的不知道如何在无限循环中调用它。 这是要使用的代码。 这是全
1回复

jQuery无尽滚动不起作用

我正在尝试对我的网站实施无限滚动功能,但由于某种原因它无法正常工作; 这是我的代码 当我滚动到底部或有任何建议时,第一个警报框起作用,并且让我知道Jquery在起作用,第二个警报框不起作用?
3回复

网页上的div中的“无尽滚动”

我想创建一个在页面中包含无限滚动内容的div。 为了识别可滚动内容的末尾以便从数据库中加载更多数据,我编写了以下代码: 问题:以下代码用于创建适合整个网页的无限滚动,但是如何为网页内的“ div”写相同的滚动条? (提示:Facebook上的股票行情器与此类似,它实时显示您朋
3回复

无尽循环不起作用

我想我已经很接近要开始工作了,但是仍然无法弄清楚我的代码出了什么问题。 我需要不停地运行一个函数,以通过大小为13或15个不同的图像序列随机交换图像src。 此功能有效,但是只有一次,它没有按照我的计划无限地运行,而没有出现“太多递归”的浏览器错误。 这是代码:
1回复

jQuery滚动功能循环

我有一个简单的jquery插件,用很少的选项来显示元素。 主要选项显示基于时间延迟或滚动功能的div。 延时效果不错,但滚动保持循环-启用/禁用复选框状态。 我到现在为止: JSFiddle 在编译期间,我可能错过了一些内容,但是看不到。 如果在滚动事件触发时功能停止并且没有
3回复

jQuery滚动无无限循环

我创建了一个包含内容和侧边栏的简单页面。 当用户滚动时,侧栏会下降。 当侧边栏较小时,它可以正常工作,但是当侧边栏较大时,它会无限下降。 我创建了一个演示页面以进行更好的解释。 在第一个示例中,边栏很小,因此可以正常使用( http://jsbin.com/ojasuj/2/ )
1回复

jQuery环绕循环滚动

除了旋转木马以外,还有使用滚动条包装的东西吗? 目前,我不使用Carousel,因为它似乎阻塞了该网站。 我在下面使用的JS只能达到div所允许的范围。 我想要的是到达终点时,用户想回到起点,而用户不必一直单击左侧。 他们可以点击向右箭头,它将在第一格再次开始。 我已经看到了wrap
3回复

使用无限滚动循环自动滚动jQuery

我有一个页面,我希望它在加载整个页面后立即自动滚动,滚动到底部,并基本上自动循环到页面的开头(实际上是在页面下方加载相同的页面)以使其无限环。 我有以下脚本可以执行此操作,但是在滚动几个顶部/底部后会中断。 到目前为止,我正在使用jQuery提供帮助。 我在另一个StackOverflow
3回复

无尽的滚动停止在第6页上加载结果

我对索引进行了无休止的滚动,数据库中有超过200个用户。 它的设置是每页显示四个用户,我可以向下滚动到的最多页面是6.有人知道它为什么没有加载其他页面? 用户控制器: 日志报告: index.html.slim: _user.html.slim:
1回复

在页面中创建无尽的可滚动div

我正在尝试在页面中创建一个无尽的可滚动div。 为此,我尝试使用以下代码-> http://jsfiddle.net/cyrus2013/Qq85d/ // lastAddedLiveFunc(); $(窗口).scroll(函数(){ }); }); 但是,这