用户鼠标点击图片后，自动跳转到下一张图片，很漂亮的图片翻页特效，各大网站中都会用到这个图片切换特效。
<!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>js实现点击图片翻页显示特效_武鸣人</title>
<style type="text/css">
html,body{
width:100%;
height:100%;
overflow:hidden;
border:0px;
margin:0px;
background:transparent;
}
.www_wuming_ren{
float:left;
width:50%;
height:100%;
}
#left{
display:none;
float:right;
width:0px;
height:395px;
background:#000;
border:1px solid #999;
}
#right{
display:none;
float:left;
width:300px;
height:395px;
background:#000;
border:1px solid #999;
}
#_wuming_ren{
position:absolute;
width:300px;
height:395px;
top:36px;
background:#111;
border:1px solid #999;
display:none;
}
#wuming_ren{
position:absolute;
width:300px;
height:395px;
top:36px;
background:#000;
border:1px solid #999;
display:none;
}
.con{
width:260px;
height:355px;
margin:20px;
font-size:14px;
line-height:160px;
color:#fff;
}
.con,.con *{
display:block;
width:260px;
text-align:center;
}
</style>
<script language="javascript" src="/img/jquery_wuming_ren.js"></script>
<script language="javascript">
//作者：kubau0
var om=true;//设置同一时间只能进行一个效果
$(document).ready(function(){
var user="美女一|美女二|美女三|美女四|美女五|第一章标题|第二章标题|第三章标题|第四章标题|第五章标题".split("|");
var content="<img src='/img/20240313_www_wuming_ren_10.jpg'>|<img src='/img/20240313_www_wuming_ren_11.jpg'>|<img src='/img/20240313_www_wuming_ren_12.jpg'>|<img src='/img/20240313_www_wuming_ren_13.jpg'>|<img src='/img/20240313_www_wuming_ren_14.jpg'>|第一章内容|第二章内容|第三章内容|第四章内容|第五章内容".split("|");
var bw=$(document).width();
var cu=0;
$("#wuming_ren").css({left:(bw-300)/2});//封面居中
setTimeout(function(){
$("#wuming_ren").slideDown("slow");//封面下拉效果
},1000);
$("#wuming_ren").click(function(){//开始效果
if(om){
om=false;//禁止其他效果
$("#wuming_ren").animate({left:bw/2},"slow",function(){//封面从居中右移至右衬底位置
$("#right").html("<div class=con>"+content[cu]+"</div>");//右衬底加载第一页内容
$("#right").show();//右衬底显示
$("#wuming_ren").animate({width:0},"slow",function(){//封面向中间收缩
$("#wuming_ren").hide();//隐藏封面
$("#left").html("<div class=con>"+user[cu]+"</div>");//左衬底加载第一页信息
$("#left").show();//左衬底显示
$("#left").animate({width:300},"slow");//左衬底向左展开
om=true;
});
});
}
});
$("#right").click(function(){//后翻页效果
if(om){
if(cu==user.length-1){//已翻到最后一页
}else{
cu++;
om=false;//禁止其他效果
$("#_wuming_ren").html($("#right").html());//设置效果层显示右衬底内容
$("#_wuming_ren").css({left:bw/2,width:300});//效果层右定位展开
$("#_wuming_ren").show();//效果层显示
$("#right").html("<div class=con>"+content[cu]+"</div>");//右衬底显示下页内容
$("#_wuming_ren").animate({width:0},"slow",function(){//效果层左收缩至中
$("#_wuming_ren").html("<div class=con>"+user[cu]+"</div>");//设置效果层显示下页内容
$("#_wuming_ren").animate({width:300,left:bw/2-300-2},"slow",function(){//效果层左展开至左衬底位置，2为border值
$("#left").html($("#_wuming_ren").html());//设置左衬底显示效果层内容
$("#_wuming_ren").hide();//隐藏效果层
om=true;
});
});
}
}
});
$("#left").click(function(){//前翻页效果
if(om){
if(cu==0){//前翻到封面
$("#left").animate({width:0},"slow",function(){//左衬底向左收缩至中
$("#left").hide();//左衬底隐藏
$("#wuming_ren").show();//显示封面
$("#wuming_ren").animate({width:300},"slow",function(){//封面向右展开
$("#right").hide();//右衬底隐藏
$("#wuming_ren").animate({left:bw/2-150},"slow");
});
});
}else{
cu--;
om=false;//禁止其他效果
$("#_wuming_ren").html($("#left").html());//设置效果层显示左衬底内容
$("#_wuming_ren").css({left:bw/2-300-2,width:300});//效果层左定位展开，2为border值
$("#_wuming_ren").show();//效果层显示
$("#left").html("<div class=con>"+user[cu]+"</div>");//左衬底显示上页内容
$("#_wuming_ren").animate({width:0,left:bw/2},"slow",function(){//效果层右收缩至中
$("#_wuming_ren").html("<div class=con>"+content[cu]+"</div>");//设置效果层显示上页内容
$("#_wuming_ren").animate({width:300,left:bw/2},"slow",function(){//效果层左展开至右衬底位置
$("#right").html($("#_wuming_ren").html());//设置右衬底显示效果层内容
$("#_wuming_ren").hide();//隐藏效果层
om=true;
});
});
}
}
});
});//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<!--把<body>改为-->
<body onselectstart="return false;">
<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>
<div class="www_wuming_ren"><!--左框架-->
<div id="left"></div>
</div>
<div class="www_wuming_ren"><!--右框架-->
<div id="right"></div>
</div>
<div id="wuming_ren"><!--封面-->
<div class="con">杂志封面，点击这里<br><img src="/img/20240313_www_wuming_ren_15.jpg"></div>
</div>
<div id="_wuming_ren"></div><!--效果层-->
</body>
</html>本文来自武鸣人网站，转载请注明出处