简略的画廊功能

简单的画廊功能
JS实现的动态画廊功能，不依赖jquery; 代码实现简单、易用;
实现原理： 通过JS定时器，定时修改div marginLeft 值，使div中的内容移动;

核心JS代码
/**
* 滚动插件对象
* @param json param
* @param int intervalId 定时器编号
* @param Object container  需动容器
* @param int totalPx    移动总相素
* @param int speedTime 每次移动时间
* @param int timeNum   移动次数
*/
var Whell = function(param) {
this.intervalId = null;
this.container = param.container;
this.totalPx  = param.totalPx;
this.speedTime = param.speedTime || 10;
this.timeNum = param.timeNum || 15;
var spacePx = parseInt(this.totalPx/this.timeNum);
if(spacePx < 0){
this.spacePx = 0 - spacePx;
}else{
this.spacePx = spacePx;
}
};

Whell.prototype = {
start : function(){
var obj = this;
this.intervalId = setInterval(function(){
obj.scroll();
}, this.speedTime);
},
/**
* 滚轮滚动方法
*/
scroll : function(){
if (this.totalPx == 0) {
//移动相素之和为1024时，停止移动
clearInterval(this.intervalId);
} else {
var currntMargin =  _getPxNumber(this.container.style.marginLeft);
if(this.totalPx > 0){
//向右移动
if(this.totalPx > this.spacePx){
this.container.style.marginLeft = (currntMargin + this.spacePx) + "px";
this.totalPx = this.totalPx - this.spacePx;
}else{
this.container.style.marginLeft = (currntMargin + this.totalPx) + "px";
this.totalPx = 0;
}
}else if(this.totalPx < 0){
//向左移动
if(this.totalPx + this.spacePx < 0 ){
this.container.style.marginLeft = (currntMargin - this.spacePx) + "px";
this.totalPx = this.totalPx + this.spacePx;
}else{
this.container.style.marginLeft = (currntMargin + this.totalPx) + "px";
this.totalPx = 0;
}
}
}
}
};



/**
* 画廊滚动
*/
Whell['gallery'] = {
slideView : function(container) {
var image = _$(".g_image", container)[0];
var pictWidth = image.width;
var pictHeight = image.height;
var pictEls = _$(".gallery_image", container).length;

var stripViewerWidth = pictWidth * pictEls;
var gallery_main = _$(".gallery_main", container)[0];
gallery_main.style.width = stripViewerWidth + "px";
container.style.width = (pictWidth+10) + "px";
container.style.height = (pictHeight +  80) + "px";

_each(_$(".gallery_paging", container), function(z, node) {
L.event.add(node, "click", function(){
//更改点击区域样式
var gallery_paging_list = _$(".gallery_paging", container);
_each(gallery_paging_list, function(i, paging){
if(i == z){
paging.className = "gallery_paging gallery_paging_selected";
}else{
paging.className = "gallery_paging";
}
});

//滚动
var cnt = -(pictWidth * z);
var startPx = gallery_main.style.marginLeft;
var totalPx = cnt - _getPxNumber(startPx);
//定时执行滚动div
var whell = new Whell({totalPx:totalPx, container: gallery_main});
//启动定时器
whell.start();

//更改描述
var gallery_description_list = _$(".gallery_description", container);
_each(gallery_description_list, function(i, description){
if(i == z){
description.style.display = "block";
}else{
description.style.display = "none";
}
});
return false;
});
});
}
};