<!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>js：使用angular实现画廊效果
原文地址：https://www.cnblogs.com/dybe/p/8253866.html