【转】angularjs无缝滚动slide-follow

html：

• {{data.option}}
//指令

angularjs：

.controller('ChatsCtrl', function($scope, $timeout,Chats) {

// 数据可以根据自己使用情况更换

$scope.datasetData = [

{option : "这个是第一条数据"},

{option : "这个是第二条数据"},

{option : "这个是第三条数据"},

{option : "这个是第四条数据"},

{option : "这个是第五条数据"},

{option : "这个是第六条数据"}

]

myxiaolaba();

function myxiaolaba(){

$timeout(function(){

var className = $('.slideUl');

var i = 0,sh;

var liLength = className.children("li").length;

var liHeight = className.children("li").height() + parseInt(className.children("li").css('border-bottom-width'));

className.html(className.html() + className.html());

// 开启定时器

sh = setInterval(slide,1000);//1000毫秒滚动一次

function slide(){

if (parseInt(className.css("margin-top")) > (-liLength * liHeight)) {

i++;

className.animate({

marginTop : -liHeight * i + "px"

},"slow");

} else {

i = 0;

className.css("margin-top","0px");

}

}

// 清除定时器

className.hover(function(){

clearInterval(sh);

},function(){

clearInterval(sh);

sh = setInterval(slide,1000);

})

},0)

}

})

效果大约是这样

当然还有别的写法，若要使用directive，可参考这个，