Js图片切换特效中的左右箭头功能实现代码
Js图片切换特效中的左右箭头功能实现代码,其实本代码就是一款简洁的图片切换效果,但是演示的重点是两个左右箭头功能的实现,一个向左、一个向右,操作得多了,就不觉得新颖了,或许对某些JS爱好者来说,他们还不曾知道这种箭头功能是如何实现的,今天通过本款代码,将为您呈现具体的方法。
Js图片切换特效中的左右箭头功能实现代码,其实本代码就是一款简洁的图片切换效果,但是演示的重点是两个左右箭头功能的实现,一个向左、一个向右,操作得多了,就不觉得新颖了,或许对某些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特效:适合拉伸变形的图片