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可以修改高度，現(xiàn)在每次滾動僅顯示一條廣告。
.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) {
// 數(shù)據(jù)可以根據(jù)自己使用情況更換
$scope.datasetData = [
{option : "這個是第一條數(shù)據(jù)"},
{option : "這個是第二條數(shù)據(jù)"},
{option : "這個是第三條數(shù)據(jù)"},
{option : "這個是第四條數(shù)據(jù)"},
{option : "這個是第五條數(shù)據(jù)"},
{option : "這個是第六條數(shù)據(jù)"}
]
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，可參考這個，
