<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JavaScript图片切换展示效果</title>

</head>

<body>

<style type="text/css">

.container, .container *{margin:0; padding:0;}

.container{width:408px; height:168px; overflow:hidden;position:relative;}

.slider{position:absolute;}

.slider li{ list-style:none;display:inline;}

.slider img{ width:408px; height:168px; display:block;}

.slider2{width:2000px;}

.slider2 li{float:left;}

.num{ position:absolute; right:5px; bottom:5px;}

.num li{float: left;color: #FF7300;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family: Arial;font-size: 12px;cursor: pointer;overflow: hidden;margin: 3px 1px;border: 1px solid #FF7300;background-color: #fff;}

.num li.on{color: #fff;line-height: 21px;width: 21px;height: 21px;font-size: 16px;margin: 0 1px;border: 0;background-color: #FF7300;font-weight: bold;}

</style>

<div class="container" id="idTransformView2">

 <ul class="slider slider2" id="idSlider2">

   <li><img src="/jscss/demoimg/201311/01.jpg"/></li>

   <li><img src="/jscss/demoimg/201311/02.jpg"/></li>

   <li><img src="/jscss/demoimg/201311/03.jpg"/></li>

 </ul>

 <ul class="num" id="idNum2">

   <li>1</li>

   <li>2</li>

   <li>3</li>

 </ul>

</div>

<script type="text/javascript">

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:5,//滑动变化率

Time:10,//滑动延时

Auto:true,//是否自动转换

Pause:2000,//停顿时间(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.οnlοad=function(){

function Each(list, fun){

for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }

};

var objs = $("idNum2").getElementsByTagName("li");

var tv = new TransformView("idTransformView2", "idSlider2", 408, 3, {

onStart: function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) },//按钮样式

Up: false

});

tv.Start();

Each(objs, function(o, i){

o. = function(){

o.className = "on";

tv.Auto = false;

tv.Index = i;

tv.Start();

}

o. = function(){

o.className = "";

tv.Auto = true;

tv.Start();

}

})

}

</script>

</body>

</html>