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和附件已经更新，欢迎下载使用^_^!）

转载于:https://www.cnblogs.com/chemdemo/archive/2011/03/04/1971188.html