【转】angularjs无缝滚动slide-follow

html：

<ion-view view-title="Chats">

<ion-content>

<style>

*{margin: 0px;padding: 0px;}

.slide {width: 200px;height:50px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;}//加粗的height可以修改高度，现在每次滚动仅显示一条广告。

.slide li {height: 49px;line-height: 49px;text-align: left;padding: 0 10px;font-size: 16px;list-style: none;border-bottom: 1px dashed #dcdcdc;cursor: pointer;}

.slide li:hover{background: #ccc;}

</style>

<div class="slide">

<ul class="slideUl">

<li ng-repeat = 'data in datasetData'>{{data.option}}</li>//指令

</ul>

</div>

</ion-content>

</ion-view>

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，可参考这个，