Javascript 鼠标悬停Jquery脚本

我将这个小代码片段用于jquery新闻代码：

var speed = 5;
var items, scroller = $('#scroller');
var width = 0;

scroller.children().each(function(){
    width += $(this).outerWidth(true);
});

scroller.css('width', width);

scroll();

function scroll(){
    items = scroller.children();
    var scrollWidth = items.eq(0).outerWidth();
    scroller.animate({'left' : 0 - scrollWidth}, scrollWidth * 100 / speed, 'linear', changeFirst);
}

function changeFirst(){
    scroller.append(items.eq(0).remove()).css('left', 0);
    scroll();
}

我试图在鼠标经过时暂停脚本

使用stop（）函数，它可以工作，但每次我将鼠标移过它时，它都会失去速度

我知道它们与宽度/距离/速度有关，但我无法纠正

以下是完整的脚本：

---

谢谢。

您可以尝试使用此插件：

$（文档）.ready（函数（）{
无功转速=5；
变量项，滚动条=$（“#滚动条”）；
var宽度=0；
scroller.children（）.each（函数（））{
宽度+=$（此）.outerWidth（真）；
});
css（'width'，width）；
滚动（）；
函数滚动（）{
items=scroller.children（）；
var scrollWidth=items.eq（0）.outerWidth（）；
动画（{'left'：（items.eq（0.offset（）.left-39）-scrollWidth}，scrollWidth*100/速度，'linear'，changeFirst）；
}
函数changeFirst（）{
scroller.append（items.eq（0.remove（））.css（'left'，0）；
滚动（）；
}
$（“#滚动条”）.hover（函数（）{
$（this.stop（）；
}，函数（）{scroll（）；}）；
});
#滚动条{高度：100%；边距：0；填充：0；行高：30px；位置：相对；}
#滚动条li{浮动：左；高度：30px；填充：010px；列表样式位置：内部；}
#ScrollerRapper{宽度：500px；高度：30px；边距：30px；溢出：隐藏；边框：1px#333实心；背景：#F2F2F2F2；}

水平滚动条

Lorem ipsum dolor sit amet，是一位杰出的献身者
我是索利西图丁大师，我是一位奉献者
产难的自然社会

您真的不需要javascript。对于您手头的任务，大多数当前浏览器只支持CSS动画


#滚动条{
显示：内联块；
保证金：0；
填充：0；
线高：30px；
-webkit动画：滚动10秒无限线性；
-moz动画：滚动10秒无限线性；
-o-动画：滚动10秒无限线性；
动画：滚动10秒无限线性；
}
#滚动条：悬停{
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
动画播放状态：暂停；
}
@-webkit关键帧滚动{
来自{-webkit转换：translateX（100%）；}
到{-webkit转换：translateX（-100%）；}
}
@-moz关键帧滚动{
来自{moz变换：translateX（100%）；}
到{moz变换：translateX（-100%）；}
}
@-o-关键帧滚动{
来自{o-变换：translateX（100%）；}
到{o-变换：translateX（-100%）；}
}
@关键帧滚动{
来自{transform:translateX（100%）；}
到{transform:translateX（-100%）；}
}
#卷轴李{
显示：内联块；
高度：30px；
填充：0 10px；
列表样式位置：内部；
}
#卷轴振打器{
显示：内联块；
宽度：500px；
高度：30px；
利润率：30像素；
溢出：隐藏；
边框：1px#333实心；
背景#f2f2；
空白：nowrap；
}

水平滚动条

Lorem ipsum dolor sit amet，是一位杰出的献身者
我是索利西图丁大师，我是一位奉献者
产难的自然社会

查看我的答案，寻找一个只支持CSS的解决方案。这也是一个不错的解决方案。但我需要旧的浏览器支持。我为未来的项目保留此代码，谢谢！很好，但它有点破坏了滚动的方式。你说它破坏了滚动的方式是什么意思？我只在Chrome上测试过它，但它似乎按照我认为应该的方式工作。它“跳跃”。我也用Chrome。好吧，应该会有固定的，它看起来开始的时候偏移量是39，而不是0。所以我纠正了这个，以摆脱跳跃。好的，谢谢。它在鼠标滑过后仍在跳跃。我会设法找到另一个解决方案。