滚动类实现垂直滚动效果-优快云博客

开发版，水平方向已完成，垂直方向没测，可以跨浏览，滚动多个当前元素索引有问题


<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* { padding:0; margin:0;}
#scroll { width: 212px; overflow: hidden; margin-left: 100px; }
#container { height: 100px; overflow: hidden; }
#container div { width: 99px; height: 98px; float: left; margin-right: 10px; border: 1px solid #eee; overflow: hidden; }
</style>
</head>

<body>
<b id="play">play</b><b id="pause">pause</b>
<div id="scroll">
<div id="container">
	<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>
</div>
</div>
<script type="text/javascript">
function ScrollClass(O){
	if(!(this instanceof arguments.callee)) return new arguments.callee(O);
	var doc,indicator,that,config,container,scroll,toolkit,items,length,correct;
	(doc=document,indicator=arguments.callee,that=this,container=scroll=items=correct=null,config={
		S:that.S=O.S,//滚动包装
		C:that.C=O.C,//滚动容器
		D:that.D=O.D,//滚动距离 后面会智能赋值
		O:that.O=O.O || 'left',//滚动方式
		N:that.N=O.N || 1,//滚动元素的个数
		delay:that.delay=O.delay || 2000, //间隔时间
		speed:that.speed=O.speed  || 1000,
		auto:that.auto=O.auto || 'true'
	});
	'function'===typeof(O.callback) && (that.callback=O.callback);

	var toolkit={
		isEmptyO : function (O){
			for(var i in O){
				return true;	
			};
			return false;
		},
		currentStyle : function (element,property){
			var computedStyle=null;
			return undefined!==element.currentStyle ? element.currentStyle[property] : document.defaultView.getComputedStyle(element,null)[property];
		},
		each:function(object,callback){
			var index,i=0,len=object.length,isO=len===undefined || ({}).toString.call(object).slice(8,-1)==='Object';
			if (isO) {
				for (index in object) {
				  if (callback.call(object[index], index, object[index]) === false) {
					break;
				  }
				}
			} else {
				for (; i < len;) {
				  if (callback.call(object[i], i, object[i++]) === false) {
					break;
				  }
				}
			}
		}
	};

	var boolean=!! function(){
		that.S=scroll=doc.getElementById(config.S),that.C=container=doc.getElementById(config.C),items=container.children,length=items.length;
		var item=items.item(0),itemSize=0;

		if(!doc.getElementById(O.S) || !doc.getElementById(O.C) || (config.O==='left' ? container.scrollWidth*2<container.offsetWidth : container.scrollHeight*2<container.offsetHeight)) return false;

		correct=config.O==='left' ? 
		(
			[parseInt(toolkit.currentStyle(item,'marginLeft')),parseInt(toolkit.currentStyle(item,'marginRight'))]
		):
		(
			[parseInt(toolkit.currentStyle(item,'marginTop')),parseInt(toolkit.currentStyle(item,'marginBottom'))]
		);

		itemSize=(config.O==='left' ? item.offsetWidth :  item.offsetHeight)+(correct[0]>0?correct[0] : correct[1]);
		//
		!config.D && (that.D=config.D=(itemSize*config.N));
		//
		config.O==='left' && (container.style.width=(config.D)*length+'px');
		container.style.height=container.scrollHeight+'px';
		if(config.D%itemSize!==0){
			throw new Error('滚动的距离和元素的尺寸不符');
			return false;
		};
		config.O=config.O==='left'? 'scrollLeft' : 'scrollTop';
		//config.items=Array.prototype.slice.call(items);
		//that.items=([]).slice.call(items);
		config.items=[],that.items=[]		
		/*toolkit.each(items,function(a,b){
			config.items.push(b);
			that.items.push(b);
		})*/
		for(var i=0;i<items.length;i++){
			var node=items[i]
			config.items.push(node);
			that.items.push(node);
		}
		!that.scrolling && (that.scrolling=false);
		return true;
	}();

	if(boolean===false) return false;
	indicator.fn=indicator.prototype,indicator.fn.constructor=indicator;


	!this.Tween && (indicator.fn.Tween=function(){
		return that.Linear.apply(that,arguments);
	});
	indicator.fn.Linear=function(t,b,c,d){ return c*t/d + b; };
	indicator.prototype.fx=function(t,b,c,d){
		return Math.ceil(that.Tween.apply(that,arguments));
	};
	indicator.fn.index=function(node,items){	

		var index=-1;
		toolkit.each(items,function(a,b){
			if(node===b){
				index=a;
			};
		});
		return index;
	};
	indicator.fn.compute=function(O){
		var t=0,b=0,c=that.D,d=50,timeout,end;
		!that.stack && (that.stack=[0]);

		void function(){
			var result=that.fx(t,b,c,d);
			result<=that.D &&  (t++,that.stack.push(result),timeout=setTimeout(arguments.callee,13)); 
			return false;
		}();
	};
	indicator.fn.condition=function(){
		var indicator=arguments.callee;
		if(that.O==='left'){
			return indicator=function(){
				return that.S.scrollLeft<that.D;
			}.apply(that);
		}else{
			return indicator=function(){
				return that.S.scrollTop<that.D;
			}.apply(that);
		};
	};
	indicator.fn.action=function(){
		var k=0,len=that.stack.length,interval,fn=0,distance=0;
		that.scrolling=true;
		(k<=len) && (
			interval=setInterval(function(){	
				distance=that.stack[++k],		
				(undefined !==distance && distance<that.D)?(	
						(that.callback && fn===0) &&(fn=1,that.callback.call(that)),
						that.S.scrollLeft=distance
					) : (
						distance===that.D && (
							fn=0,
							k=0,
							clearInterval(interval),
							that.nodeControl(),
							setTimeout(function(){that.end();},that.delay)
						)
				);
			},13)
		);
		return false;
	};
	indicator.fn.nodeControl=function(){
		toolkit.each(new Array(that.N),function(a,b){
			var temp=that.items.shift();
			a<that.N && (
				that.current=that.index(temp,config.items),
				that.C.appendChild(temp),
				that.items.push(temp)
			);
		});
		//
		that.S.scrollLeft=0;
		//
	};
	indicator.fn.end=function(){
		that.scrolling=false;
	};
	indicator.fn.activity=function(){
		that.loop=setInterval(function(){
			(that.scrolling===false && that.S.scrollLeft===0) && (
				that.action()
			);
		},5);
	};

	indicator.fn.pause=function (){
		clearInterval(that.loop);
	};
	indicator.fn.play=function (){
		that.activity();
	};
	that.compute.call(that,that.O);
	that.auto==='true' && that.activity();
};
void function(){
	var sroll=ScrollClass({S:'scroll',C:'container',speed:2000,delay:2000,N:2,auto:'true',callback:function(){
		//console.dir(this);
	}});
	document.getElementById('play').onclick=function(){
		sroll.play();
	};
	document.getElementById('pause').onclick=function(){
		sroll.pause();
	};
}();
</script>
</body>
</html>

一年前实现的scroll类


function SlideClass(A) {
    this.index = 0;
    this.timer = null;
    this.parent = A.parent || {};
    this.distance = A.distance || 0;
    this.delay = A.delay || 2000;
    this.autoPlay = A.autoPlay || "true";
    this.counter = A.counter || "false";
    this.direction = A.direction || "left";
    this.chlid = A.child || "li";
    if (!document.getElementById(A.parent)) {
        throw new Error("包裹的父节点必须")
    }
    this.parent = document.getElementById(A.parent);
    if (this.counter) {
        this.page = document.getElementById(this.counter)
    }
    this.parent.scrollTop = 0;
    this.parent.scrollLeft = 0;
    this.sub = this.parent.getElementsByTagName(this.chlid) || {};
    this.number = this.sub.length;
    this.init.call(this)
}
SlideClass.prototype = {
    init: function () {
        if (this.autoPlay === "true") {
            this.auto.call(this)
        }
        if (this.page) {
            this.pageShow.call(this)
        }
        this.fnCall()
    },
    auto: function () {
        var A = this;
        this.stop.call(this);
        this.timer = setInterval(function () {
            A.next()
        }, this.delay)
    },
    prev: function () {
        this.play(-1)
    },
    next: function () {
        this.play(1)
    },
    fnCall: function () {},
    stop: function () {
        clearInterval(this.timer)
    },
    pageShow: function () {
        var A = this.index + 1 > this.number ? this.number : this.index + 1;
        this.page.innerHTML = A + "/" + this.number
    },
    play: function (A) {
        this.index += A;
        if (this.index == this.number) {
            this.index = 0
        }
        if (this.index < 0) {
            this.index = this.number - 1
        }
        this.fx(this.parent, this.index * this.distance)
    },
    fx: function (D, C) {
        var A = function (F, E) {
                var G = Math[F - E > 0 ? "floor" : "ceil"];
                return function () {
                    return [F += G((E - F) * 0.01), F - E]
                }
            };
        var B;
        if (this.direction === "top") {
            B = A(D.scrollTop, C);
            clearInterval(D.timer);
            D.timer = setInterval(function () {
                var E = B();
                D.scrollTop = E[0];
                if (E[1] == 0) {
                    clearInterval(D.timer)
                }
            }, 10)
        } else {
            B = A(D.scrollLeft, C);
            clearInterval(D.timer);
            D.timer = setInterval(function () {
                var E = B();
                D.scrollLeft = E[0];
                if (E[1] == 0) {
                    clearInterval(D.timer)
                }
            }, 10)
        }
        if (this.page) {
            this.pageShow.call(this)
        }
        this.fnCall.call(this)
    }
};
var slide = new SlideClass({
    parent: 'preview',
    child: 'li',
    distance: 470,
    delay: 4000,
    current: 'curr'
});

scroll base