很常见的javascript效果,写成控件,需要的时候可以直接拿来用
代码:
//原生JavaScript焦点图切换控件
function PicSlide(){
var controls = document.getElementById('slide-controls').getElementsByTagName('li');//根据需要选择元素
var list = document.getElementById("slide-list").getElementsByTagName('li');//根据需要选择元素
var delay = 3000;
var _this = this;
_this.active = 0; //当前显示内容的下标
_this.list = list;
_this.controls = controls;
for(var i=0; i<controls.length; i++){
controls[i].index = i;
controls[i].onmouseenter = function(){
if(this.index === _this.active) return;
clearInterval(_this.timer);
_this.clear();
_this.select(this);
};
controls[i].onmouseleave = function(){
clearInterval(_this.timer);
_this.timer = setInterval(function(){
_this.run()
}, delay);
};
}
_this.timer = setInterval(function(){ _this.run() }, delay);
};
PicSlide.prototype = {
/*内容淡入*/
select: function(target){
target.className = 'active';
this.active = target.index;
effect.animate(this.list[target.index], { 'opacity': 100 } );
},
/*内容淡出*/
clear: function(){
var controls = this.controls;
var list = this.list;
var active = this.active;
controls[active].className = '';
effect.animate(list[active], { 'opacity': 0 });
},
/*顺序播放焦点图*/
run: function(){
var controls = this.controls;
var list = this.list;
var active = this.active;
this.clear();
active += 1;
active = active % controls.length;
controls[active].className = 'active';
effect.animate(list[active], { 'opacity': 100 } );
this.active = active;
}
};