var counter={};//计时器对象,全局变量
var indexSlider=function(settings){
this.settings=settings;
this.init();//构造函数
};
indexSlider.prototype.init=function(){//构造函数
var _this=this;
if(_this.settings.ID===undefined){
throw new Error('错误,请指定ID');
}
_this.imgCounts=$('#'+_this.settings.ID).find('.sideImages').children('ul').children('li').length;
if(_this.imgCounts>_this.settings.maxImages){
throw new Error('错误,超过最多图片数');
}
if(_this.imgCounts<=_this.settings.maxImages){
_this.settings.maxImages=_this.imgCounts;
}
initThum(_this.settings.ID)
_this.current=0;
$('#'+_this.settings.ID).find('.sideControl').find('.currentShow').css({left:_this.settings.baseWidth});
/**------绑定事件------**/
$('#'+_this.settings.ID).find('.sideControl').children('span').bind('click',function(event){
//event.preventDefault();
var _that=$(this);
_this.goTo(_that.attr('rel'));
});
/**------绑定事件------**/
_this.autoSlide();
}
indexSlider.prototype.autoSlide=function(){//自动滚动
var _this=this;
var _speed=_this.settings.speed;
counter.time1=setInterval(function(){_this.current++;if(_this.current>=_this.settings.maxImages){_this.current=0;}_this.sideTo(_this.current)},_speed);
}
indexSlider.prototype.sideTo=function(index){//滚动到指定位置
if(index===null || index===undefined){
throw new Error('非法索引');
}
var _this=this;
_left=index*_this.settings.step+_this.settings.baseWidth*(index*2+1);
$('#'+_this.settings.ID).find('.sideControl').find('.currentShow').animate({left:_left},_this.settings.slideSpeed);
_this.slideImg(index);
}
indexSlider.prototype.slideImg=function(index){//滚动图片
if(index===null || index===undefined){
throw new Error('非法索引');
}
var _this=this;
_left=-index*_this.settings.imgStep;
$('#'+_this.settings.ID).find('.sideImages').find('ul').animate({left:_left},_this.settings.slideSpeed);
}
indexSlider.prototype.goTo=function(index){//中断自动执行滚动到指定位置
if(index===null || index===undefined){
throw new Error('非法索引');
}
var _this=this;
if(index<0 || index>_this.settings.maxImages){
throw new Error('非法索引范围');
}
if(counter.time1){
clearInterval(counter.time1);
}
_this.sideTo(index);
_this.current=index;
_this.autoSlide();
}
var initThum=function(ID){//初始化略图
var _bigImgHandle=$('#'+ID).find('.sideImages').children('ul').children('li');
var _len=_bigImgHandle.length;
for(var i=0;i<_len;i++){
_src=_bigImgHandle.eq(i).find('img').attr('src');
$('#'+ID).find('.sideControl').append('<span rel="'+i+'"><img src="'+getThumByBigImage(_src)+'" width="124" height="60"/></span>')
}
return true;
}
var getThumByBigImage=function(bigImageSrc){//通过大图地址获得小图地址
if(bigImageSrc==='' || bigImageSrc===undefined){
throw new Error('请指定大图地址');
}
var _arr1=bigImageSrc.split('/');
var _len=_arr1.length;
var _image=_arr1[_len-1];
var _arr2=_image.split('.');
var _thumImage=_arr2[0]+'_x.'+_arr2[1];
var _thum='';
for(var i=0;i<_len;i++){
if(i<_len-1){
_thum+=_arr1[i]+'/'
}
}
_thum+=_thumImage;
return _thum;
}
一个使用JS原型的图片滚动类
最新推荐文章于 2023-05-04 09:24:44 发布