jQuery ui制作电子杂志书演示，兼容性可靠。

jquery ui插件制作图片幻灯片电子相册，jQuery带有翻页效果的图片电子杂志书。支持收藏，翻页功能的电子相册。比较实用的电子杂志书，兼容各大主流浏览器IE6或以上等。

 

查看演示>>

 

<link type="text/css" href="http://www.jsfoot.com/jquery/demo/2012-06-30/css/book.css" rel="stylesheet" />

<div id="book" style="margin:0 auto;">

	<div class="arrow" style="left: -27px;">
		<div class="mask"></div>
		<div class="al" title="上一页"></div>
	</div>

	<div id="flip">
		<div class="container">
			<div class="label"></div>
			<div class="content"></div>
			<div class="pager"></div>
		</div>
		<div class="overlayer ie_l"><img src="http://www.jsfoot.com/jquery/demo/2012-06-30/images/flip_r.png" width="100%" height="627" /></div>
	</div>
	
	<div id="left">
		<div class="label"><a id="btn_fav" href="http://www.jsfoot.com/" title="每个人身边都有一个桃姐" tag="活法"><img src="http://www.jsfoot.com/jquery/demo/2012-06-30/images/favourite.jpg" />收藏</a><img src="http://www.jsfoot.com/jquery/demo/2012-06-30/images/vertical.jpg"/><a id="btn_down" href="http://cn.yimg.com/2012323huofapdf/huofa.pdf" target="_blank"><img src="http://www.jsfoot.com/jquery/demo/2012-06-30/images/download.jpg" />下载</a></div>
		<div class="content">
			<div class="default"><img alt="" src="http://www.jsfoot.com/jquery/demo/2012-06-30/images/2012032317.jpg" height="441" width="277"><p align="center"></p></div>
		</div>
		<div class="pager"></div>
	</div>
	
	<div id="right">
	
		<div class="label">每个人身边都有一个桃姐<span>2012.3.23 第六十八期</span></div>
	
		<div class="content">
			<div class="default"><img src="http://www.jsfoot.com/jquery/demo/2012-06-30/images/taojiefm2.jpg" style="cursor:pointer;" onclick="$('#book .arrow .ar').click();"/></div>
		</div>
		<div class="glide">
			<div style="left: 50%;"></div>
		</div>
	
	</div>
	
	<div id="foot"></div>

	<div class="arrow" style="left:965px;">
		<div class="mask"></div>
		<div class="ar" title="下一页"></div>
	</div>
	
</div>

<script type="text/javascript" src="http://www.jsfoot.com/jquery/demo/2012-06-30/js/jqueryui-1.8.min.js"></script>
<script type="text/javascript" src="http://www.jsfoot.com/jquery/demo/2012-06-30/js/book.js"></script>
<script type="text/javascript" src="http://www.jsfoot.com/jquery/demo/2012-06-30/js/page.js"></script>