js实现淘宝首页图片轮播效果
以前写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部分：
View Code
function Player(btns, scrollContent, imgHeight, timeout, 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);
}
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.pointer = n;
if(this.pointer >= this.btns.length) {
this.pointer = 0;
}
this.clearHover();
this.btns[this.pointer].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.pointer));
this.animateIterval && this.animateIterval();//修正快速切换时闪动
this.animateIterval=animate(this.scrollContent, {top : startVal},{top : alterVal}, 1000, Tween.Quad.easeOut);
//这里默认设置每张图滚动的总时间是1s
},
next: function() {
this.invoke(this.pointer + 1);
},
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对象，这个是偷来的，本人数学没那么好，哎~~）。
最后贴上相应的CSS样式：
* {margin: 0;padding:0;}
body {background: #222;}
ol {list-style: none;}
img {border: 0 none;}
#slider {
border: 1px solid #F60;
width: 490px;
height: 170px;
overflow: hidden;
position: relative;
margin: 2em auto;
}
#slider .player {
/*width: 2450px;
height: 850px;*/
position: absolute;
top: 0px;
left: 0px;
}
#slider .player li {
width: 490px;
height: 170px;
}
#slider .btns {
position: absolute;
right: 10px;
bottom: 5px;
height: 30px;
}
#slider .btns li {
font: 13px Tahoma, Arial, 宋体, sans-serif;
float: left;
margin: 0 3px;
border: 1px solid #F60;
background-color: #FFF;
color: #CC937A;
opacity: .8;
cursor: pointer;
width: 20px;
height: 20px;
line-height: 19px;
text-align: center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#slider .btns li.active {
background: #F60;
color: #FFF;
font-weight: bold;
opacity: 1;
}
经本人测试，IE6+、FF3.6、Ch 10.0、Opera 11.0、Sa 5.0正常运行。
感谢您能看到最后，请单击查看Demo，请单击下载Demo附件！
Tag js实现淘宝首页图片轮播效果
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架