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原型的图片滚动类
热度:153 发布时间:2012-11-08 08:48:11.0
相关解决方案