像腾讯网一样，可用鼠标点击左右按钮实现图片翻书页切换显示效果，根据自己需求来设置图片数量窗口大小。
<!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">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>左右按钮翻页图片切换显示特效_武鸣人</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#ccc url(/img/20240306_www_wuming_ren_32.jpg) repeat top left;
font-family: Arial, Helvetica, sans-serif;
color:#444;
font-size:12px;
color: #000;
}
h1{
color:#2F1B0C;
font-size:40px;
margin:20px 0px 0px 20px;
}
/* Booklet jQuery Plugin Style*/
.booklet{
-moz-box-shadow:0px 0px 1px #fff;
-webkit-box-shadow:0px 0px 1px #fff;
box-shadow:0px 0px 1px #fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.booklet .b-wrap-left{
background:#fff url(/img/20240306_www_wuming_ren_33.jpg) no-repeat top left;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.booklet .b-wrap-right{
background:#efefef url(/img/20240306_www_wuming_ren_34.jpg) no-repeat top left;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.booklet .b-counter{
bottom:10px;
position:absolute;
display:block;
width:90%;
height:20px;
border-top:1px solid #ddd;
color:#222;
text-align:center;
font-size:12px;
padding:5px 0 0;
background:transparent;
-moz-box-shadow:0px -1px 1px #fff;
-webkit-box-shadow:0px -1px 1px #fff;
box-shadow:0px -1px 1px #fff;
opacity:0.8;
}
.book_wrapper{
margin:0 auto;
padding-top:50px;
width:905px;
height:540px;
position:relative;
background:transparent url(/img/20240306_www_wuming_ren_35.png) no-repeat 9px 27px;
}
.book_wrapper h1{
color:#13386a;
margin:5px 5px 5px 15px;
font-size:26px;
background:transparent url(/img/20240306_www_wuming_ren_36.png) no-repeat bottom left;
padding-bottom:7px;
}
.book_wrapper p{
font-size:14px;
text-indent:28px;
line-height:22px;
margin:5px 5px 5px 15px;
}
.book_wrapper a.article,
.book_wrapper a.demo{
background:transparent url(/img/20240306_www_wuming_ren_37.png) no-repeat 50% 0px;
display:block;
width:95px;
height:41px;
text-decoration:none;
outline:none;
font-size:16px;
color:#555;
float:left;
line-height:41px;
padding-left:47px;
}
.book_wrapper a.demo{
margin-left:50px;
}
.book_wrapper a.article:hover,
.book_wrapper a.demo:hover{
background-position:50% -41px;
color:#13386a;
}
.book_wrapper img{
margin:10px 0px 5px 35px;
width:300px;
padding:4px;
border:1px solid #ddd;
-moz-box-shadow:1px 1px 1px #fff;
-webkit-box-shadow:1px 1px 1px #fff;
box-shadow:1px 1px 1px #fff;
}
.booklet .b-wrap-right img{
border:1px solid #E6E3C2;
}
a#next_page_button,
a#prev_page_button{
display:none;
position:absolute;
width:41px;
height:40px;
cursor:pointer;
margin-top:-20px;
top:50%;
background:transparent url(/img/20240306_www_wuming_ren_38.png) no-repeat 0px -40px;
}
a#prev_page_button{
left:-30px;
}
a#next_page_button{
right:-30px;
background-position:-41px -40px;
}
a#next_page_button:hover{
background-position:-41px 0px;
}
a#prev_page_button:hover{
background-position:0px 0px;
}
.loading{
width:160px;
height:56px;
position: absolute;
top:50%;
margin-top:-28px;
right:135px;
line-height:56px;
color:#fff;
padding-left:60px;
font-size:15px;
background: #000 url(/img/20240306_www_wuming_ren_39.gif) no-repeat 10px 50%;
opacity: 0.7;
z-index:9999;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>
<link href="/img/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen">
<script src="/img/jquery-wuming.js" type="text/javascript"></script>
<script src="/img/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/img/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<span style="color:#FF0000">需要加载js文件，请刷新页面后看效果！</span>
<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="prev_page_button"></a>
<div id="loading" class="loading">Loading pages...</div>
<div id="mybook" style="display:none;">
<div class="b-load">
<div>
<img src="/img/20240306_www_wuming_ren_40.jpg" alt=""/>
<h1>武鸣人一号标题</h1>
<p>记录日常生活点滴，努力是一种状态，与年龄无关，越努力越幸运，越自律越优秀，所有优秀背后都是苦行僧般的自律。</p>
<a href="#" target="_blank" class="article">首页</a>
<a href="#" target="_blank" class="demo">下载</a>
</div>
<div>
<img src="/img/20240306_www_wuming_ren_41.jpg" alt="">
<h1>一流ICONS</h1>
<p>一流素材网推出的一个利用CSS定位快速应用</p>
<p>一流图标是一流素材网站开发的一套网页常用小图标排版图和对应的CSS定位样式表。</p>
<p>有了一流图标，快速部署您的网站前台框架，只需简单的一行代码，图标便越于纸上。</p>
<a href="#" target="_blank" class="article">查看</a>
<a href="#" target="_blank" class="demo">预览</a>
</div>
<div>
<img src="/img/20240306_www_wuming_ren_42.jpg" alt="">
<h1>web ui和工业设计png素材大全200款打包下载</h1>
<p>本套PNG素材包包含了网页设计和工业设计中常用到的多达200款png素材下载，如计算器、便签、别针、相机、钟表、信用卡、货币、web图标、锁、地球、齿轮电话、方向标、U盘插口等等众多PNG图标。</p>
<a href="#" target="_blank" class="article">查看</a>
<a href="#" target="_blank" class="demo">预览</a>
</div>
<div>
<img src="/img/20240306_www_wuming_ren_43.jpg" alt="">
<h1>3D电影走马灯风格图片轮播Flash/XML</h1>
<p>一款好的焦点图会让整个网站焕然声色！3D电影走马灯风格的图片轮播，适合小图片的产品介绍焦点图等。Flash/xml调用。</p>
<a href="#" target="_blank" class="article">查看</a>
<a href="#" target="_blank" class="demo">预览</a>
</div>
<div>
<img src="/img/20240306_www_wuming_ren_44.jpg" alt="">
<h1>ckeditor插件之插入代码和代码高亮插件完美版</h1>
<p>此款ckeditor插入代码高亮插件支持PHPCMS，其实做这个本来就是针对PHPCMS的ckeditor编辑器来做的。本站用的即是这个插件。</p>
<a href="#" target="_blank" class="article">查看</a>
<a href="#" target="_blank" class="demo">预览</a>
</div>
<div>
<img src="/img/20240306_www_wuming_ren_45.jpg" alt="">
<h1>商城960像素宽屏淡入淡出JS焦点广告图代码</h1>
<p>这个JS焦点广告图淡入淡出效果，很大气。而且利于搜索引擎。这是JS焦点图的好处。适合商城、企业、门户等大气型的网站使用。</p>
<a href="#" target="_blank" class="article">查看</a>
<a href="#" target="_blank" class="demo">预览</a>
</div>
<div>
<img src="/img/20240306_www_wuming_ren_46.jpg" alt="">
<h1>全世界国家SQL数据库及对应国旗PNG图标打包下载</h1>
<p>本压缩包包含一个全世界国家SQL文件，和两个对应的国旗文件夹(GIF格式、PNG格式)。利用Phpmyadmin/Sql命令行等工具导入压缩包内的tm_countr...</p>
<a href="#" target="_blank" class="article">查看</a>
<a href="#" target="_blank" class="demo">预览</a>
</div>
<div>
<img src="/img/20240306_www_wuming_ren_47.jpg" alt="">
<h1>16, 24, 32,64像素web常用图标几十款</h1>
<p>包含EPS和PNG两个格式，并且这两种格式各包含16, 24, 32,64像素的图标，这些图标都是网站经常用的.</p>
<a href="#" target="_blank" class="article">查看</a>
<a href="#" target="_blank" class="demo">预览</a>
</div>
</div>
</div>
</div>
<div></div>
<script type="text/javascript">
$(function() {
var $mybook = $('#mybook');
var $bttn_next= $('#next_page_button');
var $bttn_prev= $('#prev_page_button');
var $loading= $('#loading');
var $mybook_images= $mybook.find('img');
var cnt_images= $mybook_images.length;
var loaded= 0;
//preload all the images in the book,
//武鸣人网站https://www.wuming.ren 网站域名很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//and then call the booklet plugin
$mybook_images.each(function(){
var $img = $(this);
var source= $img.attr('src');
$('<img/>').load(function(){
++loaded;
if(loaded == cnt_images){
$loading.hide();
$bttn_next.show();
$bttn_prev.show();
$mybook.show().booklet({
name: null, // name of the booklet to display in the document title bar
width: 800, // container width
height: 500, // container height
speed: 600, // speed of the transition between pages
direction: 'LTR', // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
startingPage: 0, // index of the first page to be displayed
easing: 'easeInOutQuad', // easing method for complete transition
easeIn: 'easeInQuad', // easing method for first half of transition
easeOut: 'easeOutQuad', // easing method for second half of transition
closed: true, // start with the book "closed", will add empty pages to beginning and end of book
closedFrontTitle: null, // used with "closed", "menu" and "pageSelector", determines title of blank starting page
closedFrontChapter: null, // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
closedBackTitle: null, // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
closedBackChapter: null, // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
covers: false, // used with "closed", makes first and last pages into covers, without page numbers (if enabled)
pagePadding: 10, // padding for each page wrapper
pageNumbers: true, // display page numbers on each page
hovers: false, // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
overlays: false, // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
tabs: false, // adds tabs along the top of the pages
tabWidth: 60, // set the width of the tabs
tabHeight: 20, // set the height of the tabs
arrows: false, // adds arrows overlayed over the book edges
cursor: 'pointer', // cursor css setting for side bar areas
hash: false, // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
keyboard: true, // enables navigation with arrow keys (left: previous, right: next)
next: $bttn_next, // selector for element to use as click trigger for next page
prev: $bttn_prev, // selector for element to use as click trigger for previous page
menu: null, // selector for element to use as the menu area, required for 'pageSelector'
pageSelector: false, // enables navigation with a dropdown menu of pages, requires 'menu'
chapterSelector: false, // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'
shadows: true, // display shadows on page animations
shadowTopFwdWidth: 166, // shadow width for top forward anim
shadowTopBackWidth: 166, // shadow width for top back anim
shadowBtmWidth: 50, // shadow width for bottom shadow
before: function(){}, // callback invoked before each page turn animation
after: function(){} // callback invoked after each page turn animation
});
//Cufon.refresh();
}
}).attr('src',source);
});
});
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处