从右到左滚动文本效果

我试图从右到左滚动文本（实际列出元素）。

这是HTML代码

 
 
text 1
 
text 2
 
  

我的CSS

 #slider-txt { position:relative; width: 590px; } #slider-txt ul { list-style-type: none; position: absolute; margin: 0px; padding: 0px; } #slider-txt ul li { text-align: right; } 

和jQuery

 var box = $('#slider-txt'); if (box.length == 0) { return; } var ul = box.find('ul'); var li = $('#slider-txt').find('li'); var liWidth = box.width(); var ulWidth = liWidth * li.length; li.css('width', liWidth); ul.css('width', ulWidth); li.css('display', 'inline-block'); var liElement = 0; function slideNxt() { liElement++; if (liElement == li.length) { liElement = 0; } var curLeftPos = ul.css('left').split('px')[0]; var newLeftPos = -(liElement * liWidth); ul.animate({ left: newOffset + 'px' }, { duration: 'slow', easing: 'swing' }); } setInterval(slideNxt, 2000); 

上面的代码在循环中从右到左摆动列表项。 列表项上设置的内联块属性似乎没有按预期工作（列表项目显示在另一个下面）。 此外，如果列表项开箱即用（div＃slider-txt）宽度，我希望隐藏列表项，这是不会发生的。

你能帮我解决这些问题吗？ 谢谢…

Answer 1

需要编辑CSS …我们将获得滚动效果。

 #slider-txt { width: 590px; height: 20px; display:block; overflow:hidden; /* to hide the text */ position: relative; } #slider-txt ul { list-style-type: none; margin: 0px; padding: 0px; position: absolute; } #slider-txt ul li { text-align: center; float: left; /* brings the list items in one line */ } 

Answer 2

你真的不想使用marque，它不是非常直观的用户。 相反，我建议你有一个巨大的旋转棒棒糖，用CSS3编写！

小提琴： http ： //jsfiddle.net/garreh/AA6KL

我无法抗拒。