<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/bootstrap.min.css"/>
<script src="../angular-1.6.5/angular.js"></script>
<style type="text/css">
*{padding:0px;margin: 0px;list-style-type: none;}
.bb{
transition:all 1s ;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl" style="margin:0px auto;overflow:hidden; position:relative; width:540px">
<!--/*通过比较此参数决定是否使用此样式*/-->
<ul ng-style="uls" style="width: 2160px;position: relative; overflow:
hidden; padding: 0px; margin: 0px;" ng-class="{bb:1==see}">
<!--循环遍历lis-->
<li ng-style="aa" style="float: left; width: 540px;" ng-repeat="item in lis">
<img src="{{item.img}}" />
</li>
</ul>
</div>
</body>
<script language="JavaScript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.lis = [
{"img":"../image/slide1.jpg"},
{"img":"../image/slide2.jpg"},
{"img":"../image/slide3.jpg"}
]
$scope.uls = {"left":"0px"};
var index=0;
$scope.see=1;
var ll=0;
setInterval(function(){
$scope.$apply(function(){ //如果在setInterval或者其它js类似方法中修改了数据，需要手动通过apply更新。
var lv=parseInt($scope.uls.left);
if(index==2){
if(ll==2){
$scope.lis = [
{"img":"../image/slide3.jpg"},
{"img":"../image/slide1.jpg"},
{"img":"../image/slide2.jpg"}
]
}else if(ll==4){
$scope.lis = [
{"img":"../image/slide2.jpg"},
{"img":"../image/slide3.jpg"},
{"img":"../image/slide1.jpg"}
]
}else if(ll==6){
$scope.lis = [
{"img":"../image/slide1.jpg"},
{"img":"../image/slide2.jpg"},
{"img":"../image/slide3.jpg"}
]
ll=0;
}
console.log(ll);
$scope.see=0;
index=0;
lv=0;
}else{$scope.see=1;lv-=540;index++;ll++;}
$scope.uls.left = lv+"px";
})
},1500);
});
</script>
</html>
