还是直接上代码比较好
<!doctype html>
<html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/animate.min.css"/> <style type="text/css"> .tabs{position:relative;width: 100%;height: 100%; overflow: hidden;} .tabs ol,.tabs ol li{list-style: none; } .tabs ol{position: absolute;left: 50%;bottom: 50px;width: 160px;height: 15px; margin-left:-80px;z-index: 1010;} .tabs ol li{ float: left;width: 15px;height: 15px;margin-left: 10px; border-radius: 50%; background: #ED346C; line-height: 15px;text-align: center;font-size: 15px;background: #00b274; } .tab-pane-wrap{width: 100%;height: 1920px;position: relative;} .tabs .tab-pane{ position:absolute;left:0;top:480px;width: 100%;height: 480px; float: left;text-align: center;font-size: 50px;line-height: 250px; } .color0{background:#0000FF;} .color1{background: #0B4C6E;} .color2{background: #2079BE;} .color3{background: #2B542C;} ol li.on{background:red ;} .tabs .tab-pane.on{left: 0;top:0;} section{ width: 600px;height: 480px;margin: 0 auto; } </style> <script src="js/angular.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var app=angular.module('myapp',[]); app.directive('tabs',function($interval){ return{ restrict:'E',//指定以某种格式来调用指令 //元素（E）,属性（A），类（C），注释（M） replace:true,//将自定义标签从生成的dom中完全移除 templateUrl:'index-link.html', link:function(scope, element, attr){ scope.arr=['0','1','2','3']; scope.cls=[ {cl1:'tab-pane',cl2:'color0',ani:'animated'}, {cl1:'tab-pane',cl2:'color1',ani:'animated'}, {cl1:'tab-pane',cl2:'color2',ani:'animated'}, {cl1:'tab-pane',cl2:'color3',ani:'animated'} ]; console.log($interval) scope.now=0; scope.old=999; scope.click=function(index1){ scope.old=scope.now; scope.now=index1; }; var interval=$interval(function(){ scope.now++; if(scope.now>3){ scope.now=0; } },2000); scope.mouseenter=function(){ $interval.cancel(interval); }; scope.mouseleave=function(){ interval=$interval(function(){ scope.now++; if(scope.now>3){ scope.now=0; } },2000); }; } } });</script>
</head><body ng-app="myapp"> <tabs></tabs> <script type="text/ng-template" id="index-link.html"> <section id="carouse" ng-mouseenter="mouseenter();" ng-mouseleave="mouseleave()"> <div class="tabs"> <ol> <li ng-repeat="ind in arr" ng-click="click($index)" ng-class="{on:$index==now}">{ {ind}}</li> </ol> <div class="tab-pane-wrap"> <div ng-repeat="cl in cls" class="{ {cl.cl1}} { {cl.cl2}} { {cl.ani}}" ng-class="{on:$index==now,slideOutLeft:$index==old,lightSpeedIn:$index==now}"></div> </div> </div> </section> </script></body></html>