首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

一个应用JS原型的图片滚动类

2012-11-08 
一个使用JS原型的图片滚动类var counter{}//计时器对象,全局变量varindexSliderfunction(settings){thi

一个使用JS原型的图片滚动类

var counter={};//计时器对象,全局变量varindexSlider=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;}

热点排行