Js图片切换特效中的左右箭头功能实现代码

答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js图片切换特效中的左右箭头功能实现代码</title>
</head>
<body>
<!--开始-->
<div style="position:relative;float:left"><!--整个模块包含在一个div里面-->
<img  id="viewImg" /><!--主图片显示位置-->
<img id="loader" style="position:absolute;top:49%;left:49%" src="/jscss/demoimg/loading.gif"><!--加载图片显示位置，可以修改成你喜欢的load图片-->
</div>
<!--结束-->
<script type="text/javascript">
function $(e){
	return "string" == typeof e ? document.getElementById(e) : e;
	}
var Event={
	add:function (obj,EventType,fn){
	if (obj.attachEvent){
		obj['e'+EventType+fn] = fn;
		obj[EventType+fn] = function() {obj['e'+EventType+fn](window.event);}
		obj.attachEvent('on'+EventType,obj[EventType+fn]);
		}else if(obj.addEventListener){
			obj.addEventListener(EventType,fn,false);	
			}else	{
				obj['on'+EventType]=fn;
				}
	}
	,
	remove:function(obj,Event,fn){
	if (obj.detachEvent){
		obj.detachEvent('on'+EventType,obj[EventType+fn]);
		}else if(obj.removeEventListener){
			obj.removeEventListener(EventType,fn,false);
			}else	{
				obj['on'+EventType]=null;
				}
	
	}
}
var Each=function(list,fn){
		for(var i=0,len=list.length;i<len;i++){
				fn(list[i],i)
			}
	}
Function.prototype.bind=function(object){
	__method=this;args=Array.prototype.slice.call(arguments);args.shift();
	return function (){
			__method.apply(object,args.concat(Array.prototype.slice.call(arguments)));
		}
	}
var Class={
	create:function (){
		return function (){
			this.initialize.apply(this,arguments);
			}
		}
	}
ChangeImages=Class.create();
ChangeImages.prototype={
	initialize:function (id,loader,arr){
		var oThis=this;
		this.idImg=$(id);
		this.idLoader=$(loader);
		this.arr=[];
		this.pic=this.setDefault(arr);
		Event.add(this.idImg,'load',function(){oThis.getPos()});
		Event.add(this.idImg,'mousemove',function (event){oThis.SetHand(event)});
		Event.add(this.idImg,'click',function (event){oThis.clickSet(event)});
		Event.add(this.idImg,'click',function (event){oThis.SetHand(event)});
		},
	setDefault:function(arr){
		this.count=0;//计数器
		Each(arr,function (o){this.arr.push([o,false])}.bind(this))//这样写的好处是可以限定this的作用域
		this.idImg.src=this.arr[0][0]; //设置图片默认为第一幅图
		},
	SetHand:function(event){
		switch (this.count){
			default:this.getNx(event);
			break;
			case 0:this.idImg.style.cursor="url(/jscss/demoimg/201204/right.cur),auto";
			break;
			case this.arr.length-1:this.idImg.style.cursor="url(/jscss/demoimg/201204/left.cur),auto";
			break;
			}
		},
	clickSet:function(event){
		this.arr[this.count][1]=true;
		if((this.nx>0.5 || this.count==0) && this.count!=this.arr.length-1){
				this.count++;
				this.idImg.src=this.arr[this.count][0];
			
			}else if(this.nx<0.5 || this.count==this.arr.length-1){
				this.count--;
				this.idImg.src=this.arr[this.count][0];
			
				}
		if(this.arr[this.count][1]){
				this.idLoader.style.display='none';
			}else {
				this.idLoader.style.display='block'
				}
			
		},
	getNx:function(event){
			this.nx=(document.body.scrollLeft+event.clientX-this.pic.left) / this.pic.width;
			if(this.nx>0.5){
				this.idImg.style.cursor="url(/jscss/demoimg/201204/right.cur),auto";
			}else {
				this.idImg.style.cursor="url(/jscss/demoimg/201204/left.cur),auto";
				}
		},
	getPos:function (){
			this.idLoader.style.display="none";
			var temp=this.idImg
			var top=temp.offsetTop;
			var left=temp.offsetLeft;
			var height=temp.offsetHeight;
			var width=temp.offsetWidth;
			while(temp=temp.offsetParent){
					top+=temp.offsetTop;
					left+=temp.offsetLeft;
				}
			temp=null;
		
			this.pic={top:top,left:left,height:height,width:width};
		}
	}
//以下由用户自定义
//把要翻页的图片放进一个数组
var arrImg=Array(
'/jscss/demoimg/wall_s3.jpg',
'/jscss/demoimg/wall_s4.jpg',
'/jscss/demoimg/wall_s5.jpg',
'/jscss/demoimg/wall_s6.jpg',
'/jscss/demoimg/wall_s7.jpg',
'/jscss/demoimg/wall_s8.jpg'
);
//建立一个图片翻页对象,第一个参数是主图片id，第二个是加载图片id，第三个是图片数组
objCI=new ChangeImages('viewImg','loader',arrImg);
</script>
</body>
</html>
上一个：点击小图后显示大图
下一个：JS特效：适合拉伸变形的图片
更多图片编程知识: