鼠标滚轮及左右键切换图片
一个图片滚动的效果，可以鼠标滚轮控制，键盘左右键控制,是否显示说明文字，是否自动播放……
var MouseSlide=function(option){
if(typeof(arguments[0]) == 'undefined'){ return false; }
var option = typeof(arguments[0]) == 'object' ? arguments[0] : {};
this.setoptions(option);
this.data = this.option.data;
if(this.data.length == 0){ return; }
this.total = this.data.length;
this.parent = this.option.parent;
this.bAuto = this.option.bAuto;
this.bAuto && ( this.delay = this.option.delay );
this.bKey = this.option.bKey;
this.bMouse = this.option.bMouse;
this.bTitle = this.option.bTitle;
this.items = [];
this.thumbs = [];
this.index = 0;
this.timer = null;
this.paused = false;
this.init();
}
MouseSlide.prototype = {
//读取数据
readdata: function(){
//...
},
//设置默认参数
setoptions: function(option){
this.option = {
data: [],//读取的数据
parent: document.body,//插入的父节点
bTitle: false,//是否显示文字说明（默认否）
bAuto: false,//是否自动播放（默认否）
bKey: false,//是否键盘控制（默认否）
bMouse: false,//是否鼠标滚轮控制（默认否）
delay: 5000,//自动播放间隔时间（自动播放时有效）
onStart: function(){},//滚动开始时执行
onComplete: function(){}//滚动结束时执行
};
Extend(this.option, option || {});
},
//初始化
init: function(){
//...
},
//初始设置
initset: function(){
//...
},
//滚动核心
scroll: function(){
var _this = this;
_this.onStart && _this.onStart();
for(var i=0;i<_this.total;i++) {_this.thumbs[i].className = '';}
_this.thumbs[_this.index].className = 'active';
Animate(_this.domitems,{left: -_this.index*_this.liWidth},function(){
_this.onComplete && _this.onComplete();
});
},
//鼠标移动事件
onevent: function(){
var _this = this;
for(var i=0; i<_this.total; i++){
_this.thumbs[i].index=i;
_this.thumbs[i].onmouseover=function(){
_this.timer && _this.stop();
_this.index=this.index;
_this.scroll();
};
}
},
//鼠标滚轮事件
mousewheel: function(){
var _this = this;
function scrollEvent(e){
_this.timer && _this.stop();
e = e || window.event;
var down=false;
if(e.wheelDelta){
down = e.wheelDelta < 0 ? true : false;
}else{
down = e.detail < 0 ? false : true;
}
down ? _this.index++ : _this.index--;;
_this.index == _this.total && (_this.index = _this.total-1) || _this.index < 0 && (_this.index = 0);
_this.scroll();
e.preventDefault ? e.preventDefault() : e.returnValue = false;
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
return false;
}
if(_this.dom.addEventListener){ _this.dom.addEventListener('DOMMouseScroll', scrollEvent, false); }
_this.dom.onmousewheel=scrollEvent;
},
//键盘事件
keyup: function(){
var _this = this;
document.onkeyup=function(e){
_this.timer && _this.stop();
e = e || window.event;
e.keyCode==37 && _this.index--;
e.keyCode==39 && _this.index++;
_this.index == _this.total && (_this.index = _this.total-1) || _this.index < 0 && (_this.index = 0);
_this.scroll();
_this.bAuto &&_this.play();
}
},
//绑定相关事件
bind: function(){
var _this = this;
this.onevent();
this.bKey && this.keyup();
this.bMouse && this.mousewheel();
this.bAuto && this.play();
this.bAuto && ( this.dom.onmouseover = function(){ _this.stop();} );
this.bAuto && ( this.dom.onmouseout = function(){ _this.play(); } );
},
//自动播放
play: function(){
var _this = this;
if(_this.paused){ _this.paused = false;}
_this.timer && _this.stop();
this.timer = setInterval(function(){
_this.index++ >= _this.total - 1 && (_this.index = 0);
!_this.paused && _this.scroll();
}, this.delay);
},
//播放停止
stop: function(){
clearInterval(this.timer);
this.timer = null;
}
}
