<!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>