带层次感的图片轮播
原文摘自我的前端博客，欢迎大家来访问
起因
豪哥的JS练习又一波来袭~今天又写了个百度爱玩的东西，暂且叫他带层次感的图片轮播吧
图片可以很有层次感的切换
思路
主要思路有二
图片大小、位置的计算
我的思路是这样的：
因为首尾切换，我想到的就是自己封装一个循环队列
//封装一个循环队列
function CircularQueue(arr) {
this.arr = arr || [];
}
//移除前一个，追加到最后
CircularQueue.prototype.shift = function() {
var temp = this.arr.shift();
this.arr.push(temp);
}
//移除最后一个，追加到头部
CircularQueue.prototype.unshift = function() {
var temp = this.arr.pop();
this.arr.unshift(temp);
}
//添加一个元素
CircularQueue.prototype.add = function(obj) {
this.arr.push(obj);
}现在一个数组里缓存下初始位置的大小，
//初始化ARR数组
var queue = new CircularQueue();
for (var i = 0; i < li.length; i++) {
queue.add({
top: parseInt(getStyle(li[i], 'top')),
left: parseInt(getStyle(li[i], 'left')),
width: parseInt(getStyle(li[i], 'width')),
height: parseInt(getStyle(li[i], 'height')),
zIndex: getStyle(li[i], 'z-index')
});
}然后在每一个选择项加上mouseover事件，来切换以上图片。
//绑定事件
for (var j = 0; j < links.length; j++) {
links[j].onmouseover = (function(j, len) {
return function() {
//鼠标一上去小点切换
var k = len - 1;
for (; k >= 0; k--) {
links[k].className = 'dot';
}
links[j].className += ' dot-active';
//替换大图片
var arr = getMiddleArr(j);
updateStyle(arr);
}
})(j, links.length);
}然后通过传入一个数值，得到以改数组为中心的新数组。 因为不能打乱以前的数组，所以我用了深克隆
//深克隆
Object.prototype.clones = function() {
var o = {};
for (var i in this) {
o[i] = this[i];
}
return o;
};
Array.prototype.clones = function() {
var arr = [];
for (var i = 0; i < this.length; i++)
if (typeof this[i] !== 'object') {
arr.push(this[i]);
} else {
arr.push(this[i].clones());
}
return arr;
};缓冲运动
还是用的智联社的运动库，最后将页面元素的样式更新
//调用动作函数绘制
function updateStyle(arr) {
for (var i = 0; i < li.length; i++) {
li[i].style.zIndex = arr[i].zIndex;
startMove(li[i], arr[i]);
}
}代码
全部代码就不贴在博客上了，很简单，没什么可看的，大家可以去我的github上检出
