前一篇隨筆介紹了offset*的知識，今天lizi用angular 指令寫了左右按鈕無間切換的實例，加深offset*知識的應用。
思路如下：
將容器內的內容復制一遍，采用相對父元素絕對定位的方式
紅色為復制的內容
(左箭頭)< 123456
123456 >(右箭頭)
點擊左箭頭：當圖片定位顯示為1時，讓她定位到
6
點擊右箭頭：當圖片定位顯示為6時，就讓它回到1
用angularJS寫指令的時候，有很多坑是想象不到了，例如一些jqlite方法是用不了的，還有指令的格式，下一篇小編為大家詳細講解（其實自己也是小白，吊兒郎當地學習中。。）
效果如下：
css代碼如下：
<style> *{margin: 0px;padding: 0px} .roll-wrap{ width: 1000px;height: 300px;margin: 0px auto;background: pink } .roll-arrow-left,.roll-arrow-right{display: inline-block;float: left;width: 50px;margin-top: 100px;font-size: 20px;color: white;font-weight: 500;line-height: 100px;text-align: center;cursor: pointer; height: 100px;background: rgba(0,0,0,0.4);} .roll-arrow-left{margin-right: 10px;vertical-align: middle;} .roll-arrow-right{margin-left: 10px;} .roll-center{float: left;width: 830px;height: 300px;overflow: hidden;position: relative;transition:scrollLeft 0.5s;} .roll-center-u{width: 100%;height: 300px;list-style: none;margin: 0px;padding: 0px;margin-top: 50px;position: absolute;} .roll-center-u li{display: inline-block;width: 200px;height: 200px;float: left;margin-right: 10px} .roll-center ul li img{width:200px;height: 200px;} .roll-center ul li img:hover{cursor: pointer;} </style>
html代碼：
給html便簽上加上ng-app指令： ng-app="myApp"
給body標簽上加ng-controller指令：ng-controller="rollController"
<!--這里是調用該指令-->
<my-roller img-data="imgList" ></my-roller>
js代碼如下
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script >
(function(angular) {
var app = angular.module('myApp',[]);
app.controller("rollController",["$scope",function($scope){
// 數據復制了1份，
$scope.imgList=[
{url:"images/1.jpg"},
{url:"images/2.jpg"},
{url:"images/3.jpg"},
{url:"images/4.jpg"},
{url:"images/5.jpg"},
{url:"images/6.jpg"},
{url:"images/7.jpg"},
{url:"images/8.jpg"},
{url:"images/9.jpg"},
{url:"images/10.jpg"},
{url:"images/1.jpg"},
{url:"images/2.jpg"},
{url:"images/3.jpg"},
{url:"images/4.jpg"},
{url:"images/5.jpg"},
{url:"images/6.jpg"},
{url:"images/7.jpg"},
{url:"images/8.jpg"},
{url:"images/9.jpg"},
{url:"images/10.jpg"}
]
}]
);
app.directive("myRoller",function(){
return{
restrict:"AE",
scope:{
imgData:'=' //=數據 &函數 @字符
},
template:
'<div class="roll-wrap">' +
'<span class="roll-arrow-left" id="roll-arrow-left" ng-click="arrLeftClick()"><</span>' +
'<div class="roll-center" id="roll-center"> ' +
'<ul class="roll-center-u" > ' +
'<li ng-repeat="cell in imgData "><img ng-src="{{cell.url}}" alt=""/></li>'+
'</ul>' +
'</div> ' +
'<span class="roll-arrow-right" id="roll-arrow-right" ng-click="arrRightClick()">></span> ' +
'</div>',
replace:true,
link:function(scope,elem,attrs){
//這里面有很多坑，有一些jqLite方法用不了
console.log(elem.find('ul').eq(0));
var rollUl = elem.find('ul').eq(0);
//210這個數字是 每張圖片的寬度（200）+margin-right（10）的值
rollUl.css("width",scope.imgData.length * 210 +"px");
//每次切換，只切換2張圖片的寬度，可以自己定義iSpeed的值
scope.iSpeed = -420;
function offset(elm) {
var rawDom = elm[0];
var _x = 0;
var _y = 0;
var _w = 0;
// var body = document.documentElement || document.body;
// var scrollX = window.pageXOffset || body.scrollLeft;
// var scrollY = window.pageYOffset || body.scrollTop;
_x = rawDom.offsetLeft ;
_y = rawDom.offsetTop ;
_w = rawDom.offsetWidth;
return { left: _x, top: _y ,width:_w};
}
//當點擊左箭頭
scope.arrLeftClick =function(){
scope.iSpeed =420;
//console.log(offset(rollUl).left);
rollUl.css("left",offset(rollUl).left+scope.iSpeed+"px");
//當在第一張是，讓它回到最后一張
if(offset(rollUl).left >=0){
rollUl.css("left",-offset(rollUl).width/2+'px');
}
};
//點擊右箭頭
scope.arrRightClick = function(){
scope.iSpeed = -420;
rollUl.css("left",offset(rollUl).left+scope.iSpeed+'px');
//當走到最后一張時，讓它回到頭部
if(offset(rollUl).left<-offset(rollUl).width/2) {
rollUl.css("left","0px");
//由於點擊一下按鈕，僅切換2張圖片，可以自定義iSpeed的值，決定切換幾張圖片，iSpeed的值在
rollUl.css("left",offset(rollUl).left+scope.iSpeed+'px');
//當到達第一張時，我讓它回到最后一張
} else if(offset(rollUl).left>=0) {
rollUl.css("left",-offset(rollUl).width/2+'px');
}
}
}
}
})
})(window.angular)
</script>
* 在指令中的link中我想要獲取 rollUl的offsetLeft,無論取都是undefined，后來參考了網上一位網友的方法，在他的基礎上小修改了一下，他是這樣寫的：
http://siongui.github.io/2013/05/12/angularjs-get-element-offset-position/
function offset(elm) { try {return elm.offset();} catch(e) {} var rawDom = elm[0]; var _x = 0; var _y = 0; var body = document.documentElement || document.body; var scrollX = window.pageXOffset || body.scrollLeft; var scrollY = window.pageYOffset || body.scrollTop; _x = rawDom.getBoundingClientRect().left + scrollX; _y = rawDom.getBoundingClientRect().top + scrollY; return { left: _x, top: _y };}
今天先把無間滾動的示例寫到這里，但是並沒有結束，lizi還會繼續往下寫的！
如果你不想用指令寫，要原生的無間切換，lizi把它po下面了
<div class="roll-wrap">
<span class="roll-arrow-left" id="roll-arrow-left"><</span>
<div class="roll-center" id="roll-center">
<ul class="roll-center-u">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
<li><img src="images/7.jpg" alt=""></li>
<li><img src="images/8.jpg" alt=""></li>
<li><img src="images/9.jpg" alt=""></li>
<li><img src="images/10.jpg" alt=""></li>
</ul>
</div>
<span class="roll-arrow-right" id='roll-arrow-right'>></span>
</div>
<script>
window.onload = function(){
var oCon = document.getElementById('roll-center');
var oUl = oCon.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var arrLeft =document.getElementById('roll-arrow-left');
var arrRight =document.getElementById('roll-arrow-right');
var iSpeed = -420;
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi.length* 210 +'px';
arrRight.onclick= function() {
iSpeed = -420;
oUl.style.left = oUl.offsetLeft+iSpeed+'px';
if(oUl.offsetLeft<-oUl.offsetWidth/2) {
oUl.style.left = '0px';
oUl.style.left = oUl.offsetLeft+iSpeed+'px';
} else if(oUl.offsetLeft>=0) {
oUl.style.left = -oUl.offsetWidth/2+'px';
}
};
arrLeft.onclick = function(){
iSpeed =420;
oUl.style.left = oUl.offsetLeft+iSpeed+'px';
if(oUl.offsetLeft >=0){
oUl.style.left = -oUl.offsetWidth/2+'px';
}
}
}
</script>