自己写的一个javascript首页图片切换组件

? ? ? 在平时做网站的过程中，最常用的一个组件就是首页的图片切换，网上有很多可以下载的Flash插件，jquery插件，但是有时又很难找到适合自己的，有时候是不是想自己动手写个组件？ 那样以后有什么自己个性的功能好自定义。怀着这样的心理我也开始动手写了自己的一个js组件，不依赖任何库，最原生的js语法，里面少量的用了一些js高级属性：闭包。希望对js初学者有一定的帮助，代码写的不好也希望大家能指出更正。谢谢。

?

/**

* ?定义一个生成类模板，生成的类，

* ?每次实例化后自动调用init方法

*/

var Class = window.Class = {

create: function() {

function kclass(obj) {

if(this.init){

this.init(obj);?

};

}

kclass.prototype.constructor = kclass;

return kclass;

},

emptyFn:function(){}

}

?

/*** 类的继承方法 ***/

Object.extend = function(destination, source) {

for (var property in source) {

? ?destination[property] = source[property];

}

return destination;

};

?

/**

* 绑定函数到一个指定对象***********

*/

Function.prototype.bind = function() {

?

if (arguments.length < 2 && arguments[0] === undefined) return this;

var __method = this, args = $A(arguments), object = args.shift();

return function() {

return __method.apply(object, args.concat($A(arguments)));

}

}

?

以上是prototype框架里常用的一些基础方法，个人觉得很好，就拿来使用了^_^!

?

/**定义一个名字，类似于jQuery的jQuery、$ 变量，写自己的js框架最好是这样

? *全局只有一个你定义的变量，因为全局变量越少越好！

? */

var Lcy = window.Lcy = {};

?

//以下就是实现的主要代码了，一坨一坨的，希望大家能耐心看。呵呵

?

?

/**

* @author liuchuanyang

* @Date 2012-6-7?

* @首页图片切换

*/

Lcy.PicViewTrans = Class.create();

?

Lcy.PicViewTrans.prototype = {

? ? constructor : Lcy.PicViewTrans,

? ? init : function(option) { //初始化方法，类似于java类的构造函数

? ? ? ? var opts = this._opts = Object.extend(this.defaults, option||{});

? ? ? ? if(!opts.target) {

? ? ? ? ? ? return;

? ? ? ? }

?

? ? ? ? this._element = typeof opts.target == 'string' ? document.getElementById(opts.target) : opts.target;

? ? ? ? var uls = this._element.getElementsByTagName("ul");

? ? ? ? for(var i = 0; i < uls.length; i++) {

? ? ? ? ? ? if(uls[i].className === 'slider') {

? ? ? ? ? ? ? ? this._slider = uls[i];

? ? ? ? ? ? ? ? break;

? ? ? ? ? ? }

? ? ? ? }

?

? ? ? ? if(!this._slider) {

? ? ? ? ? ? return;

? ? ? ? }

?

? ? ? ? this._opts.index = 0; ? ?//当前图片索引

? ? ? ? this._opts.count = this._slider.getElementsByTagName("li").length; //切换图总数

?

? ? ? ? //alert("opts.direct : " + opts.direct);

? ? ? ? if(opts.direct === 'left' || opts.direct === 'right') {

? ? ? ? ? ? this._slider.style.width = parseInt(this._element.offsetWidth) * opts.count + 100 + "px";

? ? ? ? } else if(opts.direct === 'up' || opts.direct === 'down') {

? ? ? ? ? ? //alert("up or down");

? ? ? ? ? ? this._slider.style.width = parseInt(this._element.offsetWidth) + "px";

? ? ? ? }

?

? ? ? ? var lis = this._slider.getElementsByTagName("li");

? ? ? ? for(i = 0; i < lis.length; i++) {

? ? ? ? ? ? lis[i].style.