实现原理：使用四个div,左边两个，一个在上一个在下，右边两个一个在上一个在下，点击右边向左翻时，先将右边下面的DIV内容更新为下一页的内容，然缩小上面的DIV宽度直到为零时，将此DIV内容更新为下面DIV的内容并设置宽度为原始大小。然后将左边下面DIV的内容更新为上面DIV的当前内容，然后将上面的DIV宽度设为零，再将上面DIV的内容更新为下一页的内容，再慢慢展开直到恢复原始大小，这样就完成了一样翻页，点左边向右翻也是同样的道理！如果再加个逐渐变黑，效果更好！不多说，直接上代码： (function($){
$.fn.JNBooks=function(setting){ var jnbooks_index=0; var jnbook_runing = false; if(!setting || setting.length<1){ return;
} if(this.css("overflow")!='hidden'){ this.css("overflow","hidden");
} if(this.css("position")!="absolute"||this.css("position")!="relative"){ this.css("position","relative");
} var jnbooks_width = this.width() / 2; var jnbooks_height = this.height(); var backLeftBox = document.createElement("div");
backLeftBox.style.cssText="width:"+jnbooks_width+"px; height:"+jnbooks_height+"px; position:absolute; top:0px; left:0px; z-index:1; background-color:#fff;overflow:hidden"; var backRightBox = document.createElement("div");
backRightBox.style.cssText="width:"+jnbooks_width+"px; height:"+jnbooks_height+"px; position:absolute; top:0px; right:0px; z-index:1; background-color:#fff;overflow:hidden"; var bookLeftBox = document.createElement("div");
bookLeftBox.style.cssText="cursor:pointer;width:"+jnbooks_width+"px; height:"+jnbooks_height+"px; position:absolute; top:0px; right:"+jnbooks_width+"px; z-index:2; background-color:#fff;overflow:hidden"; var bookRightBox = document.createElement("div");
bookRightBox.style.cssText="cursor:pointer;width:"+jnbooks_width+"px; height:"+jnbooks_height+"px; position:absolute; top:0px; left:"+jnbooks_width+"px; z-index:2; background-color:#fff;overflow:hidden";
backLeftBox.innerHTML=setting[0][0];
backRightBox.innerHTML=setting[0][1];
bookLeftBox.innerHTML=setting[0][0];
bookRightBox.innerHTML=setting[0][1]; var step = parseInt(jnbooks_width / 3);
bookLeftBox.onclick=function(){ if(jnbooks_index<=0||jnbook_runing){ return;
}else{
jnbook_runing=true;
backLeftBox.innerHTML=setting[jnbooks_index-1][0]; var timer = setInterval(function(){ if(parseInt(bookLeftBox.style.width)<=0){
clearInterval(timer);
bookLeftBox.innerHTML=backLeftBox.innerHTML;
bookLeftBox.style.width=jnbooks_width+"px";
bookRightBox.style.width="0px";
backRightBox.innerHTML=bookRightBox.innerHTML;
bookRightBox.innerHTML=setting[jnbooks_index-1][1];
timer = setInterval(function(){ if(parseInt(bookRightBox.style.width)>=jnbooks_width){
clearInterval(timer);
bookRightBox.style.width=jnbooks_width+"px";
jnbooks_index--;
jnbook_runing=false;
}else{
bookRightBox.style.width = (parseInt(bookRightBox.style.width)+step)+"px";
}
},20);
}else{ var length = parseInt(bookLeftBox.style.width)-step; if(length<0){
length=0;
}
bookLeftBox.style.width=length+"px";
}
},20);
}
}
bookRightBox.onclick=function(){ if(jnbooks_index>=setting.length-1||jnbook_runing){ return;
}
jnbook_runing=true;
backRightBox.innerHTML=setting[jnbooks_index+1][1]; var timer = setInterval(function(){ if(parseInt(bookRightBox.style.width)<=0){
clearInterval(timer);
bookRightBox.innerHTML=backRightBox.innerHTML;
bookRightBox.style.width=jnbooks_width+"px";
bookLeftBox.style.width="0px";
backLeftBox.innerHTML=bookLeftBox.innerHTML
bookLeftBox.innerHTML=setting[jnbooks_index+1][0];
timer = setInterval(function(){ if(parseInt(bookLeftBox.style.width)>=jnbooks_width){
clearInterval(timer);
bookLeftBox.style.width=jnbooks_width+"px";
jnbooks_index++;
jnbook_runing=false;
}else{
bookLeftBox.style.width=(parseInt(bookLeftBox.style.width)+step)+"px";
}
},20);
}else{ var length = parseInt(bookRightBox.style.width)-step; if(length<0){
length=0;
}
bookRightBox.style.width=length+"px";
}
},20);
}
this.append(backLeftBox); this.append(backRightBox); this.append(bookLeftBox); this.append(bookRightBox);
}
})(jQuery);使用方法：
将上面的代码复制下来，保存为jquery.JNBooks.js
然后在页面中引用JQuery与jquery.JNBooks.js <script type="text/javascript" src="Script/jquery.js" ></script><script type="text/javascript" src="Script/jquery.JNBooks.js" ></script> 然后调用 $("div").JNBooks();完整例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www./1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JNBooks演示效果</title><script type="text/javascript" src="Script/jquery.js" ></script><script type="text/javascript" src="Script/jquery.JNBooks.js" ></script></head><body><div style="width:300px; height:200px; font-size:12px; line-height:20px; border-left:solid 1px #ccc; border-bottom:solid 3px #666; border-right:solid 2px #666; border-top:solid 1px #ccc;" id="JNBooks"></div><script type="text/javascript">var list = new Array();
list.push(new Array('<img src="http://image109.360doc.com/DownloadImg/2023/07/1016/268937105_1_20230710043621494.jpg" />','<div style="width:90%; padding:5px 0px 5px 0px; margin:auto">产品介绍：欢迎使用JQuery翻书效果插件JNBooks</div>'));
list.push(new Array('<img src="http://www./Resources/UploadFles/Images/Demo2.jpg" />','<div style="width:90%; padding:5px 0px 5px 0px; margin:auto">您可以放图片也可以放文字，自由编辑HTML</div>'));
list.push(new Array('<img src="http://www./Resources/UploadFles/Images/Demo3.jpg" />','<div style="width:90%; padding:5px 0px 5px 0px; margin:auto">欢迎使用</div>'));
$("#JNBooks").JNBooks(list);</script></body></html>演示效果 产品介绍：欢迎使用JQuery翻书效果插件JNBooks 产品介绍：欢迎使用JQuery翻书效果插件JNBooks |
