前一篇随笔介绍了offset*的知识，今天lizi用angular 指令写了左右按钮无间切换的实例，加深offset*知识的应用。
思路如下：
将容器内的内容复制一遍，采用相对父元素绝对定位的方式
红色为复制的内容
(左箭头)< 123456123456 >(右箭头)
点击左箭头：当图片定位显示为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>
Live and learn ;)
浙公网安备 33010602011771号