我用的翻页代码是这样的: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)});
Event.add(document.getElementById('pripage'),'click',function (event){oThis.clickSet(event)});
Event.add(document.getElementById('pripage'),'click',function (event){oThis.SetHand(event)});
Event.add(document.getElementById('nextpage'),'click',function (event){oThis.clickSet(event)});
Event.add(document.getElementById('nextpage'),'click',function (event){oThis.SetHand(event)});
},
setDefault:function(arr){
//------显示第几张-------
var para,n;
n=self.location.href.indexOf("#");
if(n>0) {para=self.location.href.substr(n+1); } else {para=0;}
//------显示第几张End-------
this.count=para;//计数器
Each(arr,function (o){this.arr.push([o,false])}.bind(this))//这样写的好处是可以限定this的作用域
this.idImg.src=this.arr[para][0]; //设置图片默认为第一幅图
$("num").innerHTML=parseInt(this.count)+1;
$("allnum").innerHTML=this.arr.length;
},
SetHand:function(event){
switch (this.count){
default:this.getNx(event);
break;
case 0:this.idImg.style.cursor="url(images/right.cur),auto";
break;
case this.arr.length-1:this.idImg.style.cursor="url(images/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++;
if(parseInt($("num").innerHTML)==this.count){
this.idImg.src = this.arr[this.count][0];
$("num").innerHTML = this.count + 1;
}
else{
this.idImg.src = this.arr[parseInt($("num").innerHTML)][0];
this.count=parseInt($("num").innerHTML);
$("num").innerHTML = parseInt($("num").innerHTML)+1;;
}
$("testdiv").innerHTML=this.count;
this.SetHand(event);
} else if (this.nx < 0.5 || this.count == this.arr.length - 1) {
this.count--;
if(parseInt($("num").innerHTML-2)==this.count){
this.idImg.src = this.arr[this.count][0];
$("num").innerHTML = this.count + 1;
}
else{
this.idImg.src = this.arr[parseInt($("num").innerHTML)-2][0];
this.count=parseInt($("num").innerHTML)-2;
$("num").innerHTML = parseInt($("num").innerHTML)+1;;
}
$("testdiv").innerHTML=this.count;
this.SetHand(event);
}
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(images/right.cur),auto";
}else {
this.idImg.style.cursor="url(images/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('uppic/uploadpic/2011118112113223.gif','uppic/uploadpic/2011118112124290.gif','uppic/uploadpic/2011118112134507.gif','uppic/uploadpic/2011118112142472.gif');
//建立一个图片翻页对象,第一个参数是主图片id,第二个是加载图片id,第三个是图片数组
objCI=new ChangeImages('viewImg','loader',arrImg);
然后在本页面用<iframe包含了另一个网页,里面是一组图片,然后每个图片上都加了事件:onclick="parent.viewImg.src=this.src;"
目前如果在本页面,点图片,点过来,点过去,都没有问题。
关键,在于点击iframe里的图片的时候,有个bug就是点完任意一张,希望,在本页面图上点图片,是出现被点图片的下一张,而不是乱了顺序,这样的程序该怎么弄的,各位大侠?
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)});
Event.add(document.getElementById('pripage'),'click',function (event){oThis.clickSet(event)});
Event.add(document.getElementById('pripage'),'click',function (event){oThis.SetHand(event)});
Event.add(document.getElementById('nextpage'),'click',function (event){oThis.clickSet(event)});
Event.add(document.getElementById('nextpage'),'click',function (event){oThis.SetHand(event)});
},
setDefault:function(arr){
//------显示第几张-------
var para,n;
n=self.location.href.indexOf("#");
if(n>0) {para=self.location.href.substr(n+1); } else {para=0;}
//------显示第几张End-------
this.count=para;//计数器
Each(arr,function (o){this.arr.push([o,false])}.bind(this))//这样写的好处是可以限定this的作用域
this.idImg.src=this.arr[para][0]; //设置图片默认为第一幅图
$("num").innerHTML=parseInt(this.count)+1;
$("allnum").innerHTML=this.arr.length;
},
SetHand:function(event){
switch (this.count){
default:this.getNx(event);
break;
case 0:this.idImg.style.cursor="url(images/right.cur),auto";
break;
case this.arr.length-1:this.idImg.style.cursor="url(images/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++;
if(parseInt($("num").innerHTML)==this.count){
this.idImg.src = this.arr[this.count][0];
$("num").innerHTML = this.count + 1;
}
else{
this.idImg.src = this.arr[parseInt($("num").innerHTML)][0];
this.count=parseInt($("num").innerHTML);
$("num").innerHTML = parseInt($("num").innerHTML)+1;;
}
$("testdiv").innerHTML=this.count;
this.SetHand(event);
} else if (this.nx < 0.5 || this.count == this.arr.length - 1) {
this.count--;
if(parseInt($("num").innerHTML-2)==this.count){
this.idImg.src = this.arr[this.count][0];
$("num").innerHTML = this.count + 1;
}
else{
this.idImg.src = this.arr[parseInt($("num").innerHTML)-2][0];
this.count=parseInt($("num").innerHTML)-2;
$("num").innerHTML = parseInt($("num").innerHTML)+1;;
}
$("testdiv").innerHTML=this.count;
this.SetHand(event);
}
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(images/right.cur),auto";
}else {
this.idImg.style.cursor="url(images/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('uppic/uploadpic/2011118112113223.gif','uppic/uploadpic/2011118112124290.gif','uppic/uploadpic/2011118112134507.gif','uppic/uploadpic/2011118112142472.gif');
//建立一个图片翻页对象,第一个参数是主图片id,第二个是加载图片id,第三个是图片数组
objCI=new ChangeImages('viewImg','loader',arrImg);
然后在本页面用<iframe包含了另一个网页,里面是一组图片,然后每个图片上都加了事件:onclick="parent.viewImg.src=this.src;"
目前如果在本页面,点图片,点过来,点过去,都没有问题。
关键,在于点击iframe里的图片的时候,有个bug就是点完任意一张,希望,在本页面图上点图片,是出现被点图片的下一张,而不是乱了顺序,这样的程序该怎么弄的,各位大侠?
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货