html的列表怎么做出自动滚动,javascript – 如何水平自动滚动无序列表？

这是一个简单的插件函数,可以无限滚动列表项：

立即更新两个：

$.fn.scrollList = function (delay) {

delay = delay || 2000;

var animateList = function ($list) {

//get first child

var $first = $list.children('li:first');

var width = $first.outerWidth(true);

//animate first two off the screen

$first.animate({

'margin-left': $list.width() * -1

},

// on animation complete

function () {

//reset and move to the end of the list

$(this).css('margin-left', 0).add($(this).next()).appendTo($list);

//start again after delay

setTimeout(function () {

animateList($list)

}, delay);

});

};

return this.each(function () {

var $that = $(this)

setTimeout(function () {

animateList($that);

}, delay);

});

};

你可以这样称呼它：

$('.container ul').scrollList();

请注意,要正常工作,它需要一些特定的样式,最值得注意的是项目需要margin-left：0因为那是属性动画

此外,您还需要删除< li>之间的任何空格.标签以避免它们之间的额外空间,请检查this answer以获取不同的方法