过两天项目就要上线了，但是还有一个轮播
过两天项目就要上线了，但是还有一个比较抽象的轮播的bug和细滚动条的插件。今天在家里也算是解决了，哈哈，看电视看过了，写代码的时候都好几点现在不知不觉有好几点
具体的这两个修复到时候会在博客在总结出来，现在有点晚了，就只粘代码出来了。
<!DOCTYPE html> <html lang="en" ng-app="lunbo"> <head> <meta charset="UTF-8"> <script src="angular.min.js" type="text/javascript"></script> <title></title> <style> *{ margin:0; padding:0 } .content{width:978px;overflow:hidden;height:200px;position:relative;} ul{ position:absolute; left:0; top:0; width:1956px; } ul li{ width:326px; height: 200px; float:left; } img{ width:100%; height:100%; } .zuijia li{ position:absolute; left:326px; top:0; width:326px; height: 200px; background-color:red } #bbb li>div{ position:relative; } #bbb li>div>div{ position:absolute; width:100%; height:100%; left:0; top:0; background-color:rgba(255,255,255,0.5); -moz-transition: background-color; /* Firefox 4 */ -webkit-transition: background-color; /* Safari 和 Chrome */ -o-transition: background-color; /* Opera */ transition:background-color; } #bbb li>div>div:hover{ background-color:rgba(255,255,255,0); } </style> </head> <body ng-controller="lunboController"> <div lunbo ></div> <script type="text/ng-template" id="lunbo.html"> <div class="content"> <ul id="bbb"> <li ng-click="current(0)"><div ><div></div><img src="img/1.jpg" ></div></li> <li ng-click="current(1)"><div ><div></div><img src="img/2.jpg" /></div></li> <li ng-click="current(2)"><div ><div></div><img src="img/3.jpg" /></div></li> <li ng-click="current(0)"><div ><div></div><img src="img/1.jpg"/></div></li> <li ng-click="current(1)"><div ><div></div><img src="img/2.jpg"/></div></li> <li ng-click="current(2)"><div ><div></div><img src="img/3.jpg"/></div></li> </ul> <div class="zuijia"> <ul id="current"> <li style="background-color:#f00;display:none">1</li> <li style="background-color:#fff">2</li> <li style="background-color:#00f;display:none">3</li> </ul> </div> </div> <div class="incon1" ng-click="prev()">111</div> <div class="incon2" ng-click="next()">222</div> </script> </body> <script> var app=angular.module('lunbo',[]); app.controller('lunboController',['$scope', function ($scope) { }]); app.directive('lunbo',['$interval', function ($interval) { return{ restrict:'EA', templateUrl:'lunbo.html', scope:{}, link: function (scope, element, attr) { scope.step=0; scope.active=1; scope.left=0; var timer=null; scope.go=function(){ console.log(scope.step); angular.element(document.getElementById('current')).find('li').css('display','none') angular.element(document.getElementById('current')).find('li').eq(scope.step==3?0:scope.step).css('display','block') timer=null; $interval.cancel(timer) if (scope.left>-326*scope.step){ scope.speed=-40 }else{ scope.speed=40 } timer= $interval(function(){ scope.left=scope.left+scope.speed angular.element(document.getElementById('bbb')).css('left',scope.left+'px') if (scope.speed<0&&scope.left<-326*scope.step){ angular.element(document.getElementById('bbb')).css('left',-326*scope.step+'px') scope.left=-326*scope.step $interval.cancel(timer) }else if (scope.speed>0&&scope.left>-326*scope.step){ angular.element(document.getElementById('bbb')).css('left',-326*scope.step+'px') scope.left=-326*scope.step $interval.cancel(timer) } },200) //angular.element(document.getElementById('bbb')).css('left',-326*scope.step+'px') } scope.prev=function(){ scope.step++ if(scope.step>=4){ scope.step=scope.step-3; scope.left=-326*(scope.step-1) } scope.go(); } scope.next=function(){ scope.step-- if(scope.step<=-1){ scope.step=2; scope.left=-326*(scope.step+1) } scope.go(); } scope.current=function(i){ if (scope.step==0&&i==0){ scope.prev() }else{ scope.next() } } } } }]); </script> </html>
