幻灯片js单独调用的代码

ps：很多网站全站是div+css的，页面代码写的不错，但是幻灯片这块就出现了大片的js代码，下面记录下我收集的一个幻灯片js单独引用的代码。
下面是html代码：

下面是css代码：

@charset “utf-8”;
/*请先在主要CSS中确保各元素间距和填充均为0*/
/*焦点图的样式*/
#idSlider2 img,
#idSlider2 li a img,
#idSlider2 li a:hover img{
padding:0;
border:0;
}
.imageview {
float:left;
overflow: hidden;
width: 650px;
position: relative;
height: 350px;
}
.slider {
float:left;
position: absolute;
}
.slider li {
display: inline;
list-style-type: none;
}
.slider img {
display: block;
width: 650px;
height: 350px;
}
.slider2 {
width: 2600px;
}
.slider2 li {
float: left;
}
#idNum1{
width:150px;
_width:160px;
height:20px;
right: 5px;
bottom: 15px;
position: absolute;
}
#idNum1 li{
float: left;
width:18px;
height:18px;
border: #ff7300 1px solid;
filter:progid:DXImageTransform.Microsoft.BasicImage(opacity:0.75);
margin: 3px 5px;
overflow: hidden;
cursor: pointer;
color: #fff;
font:bold 14px/20px Arial;
background:url(/templets/zei/images/num2.gif) no-repeat center top;
text-align: center;
}
#idNum1 li.on{
border:0;
font:bold 14px/20px Arial;
margin: 2px 5px;
width: 20px;
color: #fff;
height: 20px;
border: #ff7300 1px solid;
background:url(/templets/zei/images/num2.gif) no-repeat center bottom;
}

/*SCROLL的样式*/
#area dd{
width:640px;
float:left;
padding:5px;
}
#area #demo{
float:left;
text-align:center;
overflow:hidden;
}
#area #indemo {
float: left;
width: 800%;
}
#area dd ul{
float:left;
margin:0 0 0 2px;
}
#area dd ul li{
float:left;
margin:0 0 0 5px;
}
#area dd ul li:hover{
cursor:pointer;
}
#area dd ul li a img {
height:160px;
padding:1px;
border:1px solid #ccc;
}
#area dd ul li a:hover img {
padding:0;
border:2px solid #c36;
}

下面是js代码：

var $ = function (id) {
return “string” == typeof id ? document.getElementById(id) : id;
};

var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}

var TransformView = Class.create();
TransformView.prototype = {
//容器对象,滑动对象,切换参数,切换数量
initialize: function(container, slider, parameter, count, options) {
if(parameter < = 0 || count <= 0) return; var oContainer = $(container), oSlider = $(slider), oThis = this; this.Index = 0;//当前索引 this._timer = null;//定时器 this._slider = oSlider;//滑动对象 this._parameter = parameter;//切换参数 this._count = count || 0;//切换数量 this._target = 0;//目标参数 this.SetOptions(options); this.Up = !!this.options.Up; this.Step = Math.abs(this.options.Step); this.Time = Math.abs(this.options.Time); this.Auto = !!this.options.Auto; this.Pause = Math.abs(this.options.Pause); this.onStart = this.options.onStart; this.onFinish = this.options.onFinish; oContainer.style.overflow = “hidden”; oContainer.style.position = “relative”; oSlider.style.position = “absolute”; oSlider.style.top = oSlider.style.left = 0; }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Up: true,//是否向上(否则向左) Step: 30,//滑动变化率 Time: 5,//滑动延时 Auto: true,//是否自动转换 Pause: 3000,//停顿时间(Auto为true时有效) onStart: function(){},//开始转换时执行 onFinish: function(){}//完成转换时执行 }; Object.extend(this.options, options || {}); }, //开始切换设置 Start: function() { if(this.Index < 0){ this.Index = this._count – 1; } else if (this.Index >= this._count){ this.Index = 0; }

this._target = -1 * this._parameter * this.Index;
this.onStart();
this.Move();
},
//移动
Move: function() {
clearTimeout(this._timer);
var oThis = this, style = this.Up ? “top” : “left”, iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);

if (iStep != 0) {
this._slider.style[style] = (iNow + iStep) + “px”;
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
} else {
this._slider.style[style] = this._target + “px”;
this.onFinish();
if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); }
}
},
//获取步长
GetStep: function(iTarget, iNow) {
var iStep = (iTarget – iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
},
//停止
Stop: function(iTarget, iNow) {
clearTimeout(this._timer);
this._slider.style[this.Up ? “top” : “left”] = this._target + “px”;
}
};

window.onload=function(){
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } }; ////////////////////////test2 var objs2 = $(“idNum1”).getElementsByTagName(“li”); var tv2 = new TransformView(“focus”, “idSlider2”, 650, 4, { //此处值分别为div和ul的ID，数字分别是图片滑动的宽度（px）和图片数量，可以对应进行修改 onStart: function(){ Each(objs2, function(o, i){ o.className = tv2.Index == i ? “on” : “”; }) },//按钮样式 Up: false }); tv2.Start(); Each(objs2, function(o, i){ o.onmouseover = function(){ o.className = “on”; tv2.Auto = false; tv2.Index = i; tv2.Start(); } o.onmouseout = function(){ o.className = “”; tv2.Auto = true; tv2.Start(); } }) }