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正常运行。

感谢您能看到最后,请单击查看Demo,请单击下载Demo附件!(demo和附件已经更新,欢迎下载使用^_^!)

posted @ 2011-03-04 19:36  chemdemo  阅读(9818)  评论(18编辑  收藏  举报