实现原理：使用四个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.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>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://www.jiniannet.com/Resources/UploadFles/Images/Demo1.jpg" />','<div style="width:90%; padding:5px 0px 5px 0px; margin:auto">产品介绍：欢迎使用JQuery翻书效果插件JNBooks</div>'));
list.push(new Array('<img src="http://www.jiniannet.com/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.jiniannet.com/Resources/UploadFles/Images/Demo3.jpg" />','<div style="width:90%; padding:5px 0px 5px 0px; margin:auto">欢迎使用</div>'));
$("#JNBooks").JNBooks(list);
</script>
</body>
</html>

演示效果