纯Js ——文字上下左右滚动

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

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

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

var CurrentStyle = function (element) {
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

//容器对象，滑块对象，参数
var ScrollCon = Class.create();

ScrollCon.prototype = {
//构造函数
initialize: function (area, bar, itag, options, ibarTgNum) {
this._area = $$(area);
this._bar = $$(bar);
this._time = null;
this._barTgNum = $$(ibarTgNum);
this.SetOption(options);
this._step = this._options.step; //改变量
this._pause = this._options.pause;
this._speed = this._options.speed;
this._mgSide = this._options.side == "up" ? "marginTop" : "marginLeft";
this._index = 0; //滚动索引
this._tagIndex = 1; //滚动子项索引
this._bar.appendChild(this._bar.cloneNode(true));
this._barTagNum = this._bar.getElementsByTagName(itag).length;
this.barH = this._bar.style.height || this._bar.offsetHeight;
this.areaH = this._area.style.height || this._area.offsetHeight;
this.areaW = this._area.style.width || this._bar.offsetWidth;
this.barW = this._bar.style.width || this._bar.offsetWidth;
this._bar.style[this._mgSide] = "0px";
this.BindNumHtml();
//添加样式

// this.Auto();
},
//参数初始化
SetOption: function (options) {
//默认参数
this._options = {
step: 1, //改变量,
side: "up",
pause: 50, //隔多高停一次
speed: 20, //滚动速度
pauseStep: 1500//滚动停留时间
};
Object.extend(this._options, options || {});

},
EditMargin: function () {  //改变滚动条属性
oThis = this;
var Step = this._step;
this._speed = this._options.speed;
if (this._index >= this._pause) {  //判断是否到了停顿的时候
this._index = Step = 0;  //索引，滚动改变量设为0
this._speed = this._options.pauseStep;   //滚动速度设为滚动停留时间
this._tagIndex++;
} else {
this._index += Step;
}
var margin = Math.abs(parseInt(oThis._bar.style[this._mgSide]));
this._bar.style[this._mgSide] = -(margin + Step) + "px";
if (margin + Step >= (this._barTagNum - 1) * this._pause) {
//  将滚动距离跳到滚动条复制前的最后一个标签
this._bar.style[this._mgSide] = -(this._barTagNum / 2 - 1) * this._pause + "px";
this._tagIndex = this._barTagNum / 2;   //直接赋值：即将要跳转的值为滚动条复制“值” 的第一个标签
}

oThis.Write(this.barW);
},
//获得偏移距离
GetMargin: function () {
return this._bar.style[this._mgSide];
},
Auto: function () {//自动滚动
oThis = this; oThis.EditMargin();
oThis.Re();

},
MoveTo: function (index) {
oThis = this;
this._index = 0;
this._tagIndex = index;
this._speed = 1000;
oThis._bar.style[this._mgSide] = -index * this._pause + "px";
oThis.Re();
oThis.Write();
},
Move: function () {
oThis = this;
oThis.EditMargin();
this._time = setTimeout(function () {
oThis.Start();
}, this._speed);
},
Start: function () {
oThis = this;
oThis.EditMargin();
},
Next: function () {
oThis = this;
this._index = 0;
this._speed = 1000;
this._tagIndex == 0 ? 1 : this._tagIndex;
this._tagIndex++;
var margin = this._tagIndex * this._pause;
if (this._tagIndex >= this._barTagNum) {
this._tagIndex = 0;
margin = 0;
}
oThis._bar.style[this._mgSide] = -margin + "px";
oThis.Re();
oThis.Write(this._tagIndex);
},
Re: function () {
oThis = this;
clearTimeout(this._time);
this._time = setTimeout(function () {
oThis.Auto();
}, this._speed);
oThis.Write(this._tagIndex);
},
Pre: function () {
oThis = this;
var margin = Math.abs(parseInt(oThis._bar.style[this._mgSide])) - this._pause;
if (margin == -this._pause) {
margin = 0;
}
oThis._bar.style[this._mgSide] = -margin + "px";
oThis.Re();
},
BindNumHtml: function () {
oThis = this;
for (var i = 1; i <= oThis._barTagNum / 2; SetHTML(i++)) { }
function SetHTML(z) {
var barNum = oThis._barTgNum.appendChild(document.createElement("li"));
barNum.onclick = function () {
oThis._bar.style.marginTop = oThis.MoveTo(z);
}
barNum.innerHTML = z--;
barNum.style.cursor = "pointer";
barNum.style.listStyle = "none";
barNum.style.float = "left";
barNum.style.paddingLeft = "5px";
}
},
Write: function (value) {
oThis = this;
var strHtml = '<div style="border:red solid 1px;width:200px;float:left;">';
strHtml += '<br>滚动区域高度：' + oThis.areaH;
strHtml += '<br>滚动对象高度：' + oThis.barH;
strHtml += '<br>滚动条距离：' + oThis.GetMargin();
strHtml += '<br>oThis._index：' + oThis._index;
strHtml += '<br>this._step：' + this._step;
strHtml += '<br>_tagIndex：' + oThis._tagIndex;
strHtml += '<br>_barTagNum：' + oThis._barTagNum;
strHtml += '<br>value：' + value;
strHtml += "</div>";
$$("divWrite").innerHTML = strHtml;

}
}

<!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>
<title></title>
<style type="text/css">
.con
{
width: 400px;
height: 50px;
border: solid 1px #000000;
line-height: 50px;
padding: 0px 10px;
overflow: hidden;
}
.con *
{
margin: 0px;
padding: 0px;
}
.conList
{
padding: 0px;
width: 5000px;
}

.conList li
{
float: left;
width: 390px;
list-style: none;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="divCon" class="con">
<ul id="divConList" class="conList" style="">
<li>热点新闻1</li>
<li>热点新闻2</li>
<li>热点新闻3</li>
<li>热点新闻4</li>
<li>热点新闻5</li>
<li>热点新闻6</li>
</ul>
</div>
<span></span>
<ul id="barNum" style="float: left; border: red solid 1px; text-align: left">
</ul>
<input type="button" value="上一个" onclick="a.Pre()" />
<input type="button" value="下一个" onclick="a.Next()" />
<input type="button" value="自动" onclick="a.Auto()" />
<input type="button" value="重启" onclick="a.Re()" />
<div id="divWrite">
</div>
</body>
</html>
<script src="ScrollBaseJs.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
window.a = new ScrollCon("divCon", "divConList", "li"
, { speed: 10, pause: 400, pauseStep: 500, side: "left" }, "barNum");
}
</script>