js实现淘宝首页图片轮播效果(修正图片滚动顺序的问题)
3月6日修改：感谢园友“猪如此累”和“平平”的建议，现已修正图片滚到最后一张时跳到第一张的问题，改为滚到第5张时倒序返回。谢谢大家的意见，今晚改的时候有不少收获~~~！
以前写js的时候，可能所需的功能也比较简单，所以一直使用常规方法（面向过程），有的时候写到后面都不知道自己都写了写什么，虽然有时候效果能勉强实现，可是一看code就惨不忍睹。今天算是真正领教到了OPP的强大，代码易读、可移植性强......等等特点，可就是在实现的过程中那叫一个痛苦（至少偶现在的水平来说是的），真正写code没用多少时间，大部分的时间都在想，这让我联想到了前几天投简历面试时面试官和我说的那样，他当时就说写js重要的是想，当时没怎么理解。现在看来，不光写css，xhtml些什么都不要急于动手，先整理好思路会事半功倍...
好了，闲话不多说，我向来写文章都不会在开始乱吹一通，一般直接上源码或者demo，今天真是有点鸡冻，一不小心多话了^_^!
以下是html结构：
<div id="slider"> <ol class="player"> <li><a href=""><img src="images/1.gif" alt="1" /></a></li> <li><a href=""><img src="images/2.jpg" alt="2" /></a></li> <li><a href=""><img src="images/3.jpg" alt="3" /></a></li> <li><a href=""><img src="images/4.jpg" alt="4" /></a></li> <li><a href=""><img src="images/5.jpg" alt="5" /></a></li> </ol> <ol class="btns"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div>
考虑到表现与行为分离的原则和js的通用性，所以常用类名而不是直接id，再此外面的div用id只是为了快速获取对象，实际操作中可换成class，逐个遍历即可。以下是js部分：
function Player(btns, scrollContent, imgHeight, timeout, hoverClass) {
/*
* btns:按钮，类型是数组
* scrollContent:摇滚动的块，一个DOM对象，这里是ol
* imgHeight:每一张图片的高度，当然，如果想改成左右滚动，这里传入每一张图片的宽，唯一需要注意的是每一张图片宽高必须相同，图片数量可调整
* timeout:切换速度快慢，默认为1.5ms
* hoverClass:每一个按钮激活时的类名
*/
hoverClass = hoverClass || 'active';
timeout = timeout || 1500;
this.btns = btns;
this.scrollContent = scrollContent;
this.hoverClass = hoverClass;
this.timeout = timeout;
this.imgHeight = imgHeight;
var _this = this;
for(var i=0; i<btns.length; i++) {
this.btns[i].index = i;
btns[i].onmouseover = function() {
_this.stop();
_this.invoke(this.index);
}
btns[i].onmouseout = function() {
_this.start();
}
}
this.invoke(0);
this.isForward = true;
this.pointer = 0;
}
Player.prototype = {
constructor : Player,
start : function() {
var _this = this;
this.stop();
this.intervalId = setInterval(function() {
_this.next();
}, this.timeout);
},
stop: function() {
clearInterval(this.intervalId);
},
invoke: function(n) {
this.invoked = n || 0;
this.clearHover();
this.btns[this.invoked].className = this.hoverClass;
//this.scrollContent.style.top = parseInt(-this.imgHeight * this.pointer) + 'px';
var startVal = parseInt(this.scrollContent.style.top) || 0;
var alterVal = (parseInt(-startVal - this.imgHeight * this.invoked));
this.animateIterval && this.animateIterval();//修正快速切换时闪动
this.animateIterval=animate(this.scrollContent, {top : startVal},{top : alterVal}, 1000, Tween.Quad.easeOut);
//这里默认设置每张图滚动的总时间是1s
},
next: function() {
if(this.pointer == 0) {
this.isForward = true;
}
if(this.pointer >= this.btns.length) {
this.isForward = false;
}
if(this.isForward) {
this.invoke(this.pointer++);
} else {
this.invoke(--this.pointer);
}
},
clearHover: function() {
for(var i=0; i<this.btns.length; i++) {
this.btns[i].className = '';
};
}
}
window.onload = function() {
var btns = getByClass('btns', $('slider'))[0].getElementsByTagName('li');
var player = getByClass('player', $('slider'))[0];
var player = new Player(btns, player, 170, 1500, undefined);
player.start();
//player.invoke(2);
}
这里稍微解释以下（详细解释见注释），源文件不止这些，还包含个人平时所用的basic库，包含如getByClass()之类的常用函数，还有图片动画按照什么方式做动画的一个对象（即Tween对象，这个是偷来的，本人数学没那么好，呵呵~~）。
经本人测试，IE6+、FF3.6、Ch 10.0、Opera 11.0、Sa 5.0正常运行。
