当前位置: 代码迷 >> JavaScript >> 一个应用JS原型的图片滚动类
  详细解决方案

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

热度:153   发布时间:2012-11-08 08:48:11.0
一个使用JS原型的图片滚动类
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;
	}

  相关解决方案