jq 图片切换效果 类似3D
2016-03-10 11:56
417 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
overflow:hidden;
height:100%;
background:url(img/bg.jpg) no-repeat;
background-size:cover;
}
#albumout{
position:absolute;
width:762px;
height:573px;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
overflow:hidden;
}
#albumout span{
float:left;
}
#albumout span img{
width:250px;
height:187px;
padding:2px;
}
#cover{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
}
#prev{
width:50px;
height:100px;
position:absolute;
top:50%;
left:100px;
margin-top:-50px;
border-radius:10px;
box-shadow: rgb(255,255,255) 0px 0px 30px 10px;
color:white;
font-size:40px;
line-height:100px;
text-align:center;
cursor:pointer;
}
#next{
width:50px;
height:100px;
position:absolute;
top:50%;
right:100px;
margin-top:-50px;
border-radius:10px;
box-shadow: rgb(255,255,255) 0px 0px 30px 10px;
color:white;
font-size:40px;
line-height:100px;
text-align:center;
cursor:pointer;
}
#albuminner{
display:none;
position:relative;
margin:10% auto 0;
width:500px;
height:375px;
}
#showBox{
position:absolute;
left:0;
top:0;
width:500px;
height:375px;
}
#albuminner img{
position:absolute;
left:0;
top:0;
width:500px;
height:375px;
}
</style>
</head>
<body>
<div id="albumout">
<span><img src="img/main/1.jpg" alt="" /></span>
<span><img src="img/main/2.jpg" alt="" /></span>
<span><img src="img/main/3.jpg" alt="" /></span>
<span><img src="img/main/4.jpg" alt="" /></span>
<span><img src="img/main/5.jpg" alt="" /></span>
<span><img src="img/main/6.jpg" alt="" /></span>
<span><img src="img/main/7.jpg" alt="" /></span>
<span><img src="img/main/8.jpg" alt="" /></span>
<span><img src="img/main/9.jpg" alt="" /></span>
</div>
<div id="cover">
<div id="prev"><</div>
<div id="next">></div>
</div>
<div id="albuminner">
<div id="showBox">
<img src="img/show/0/1.jpg" alt="" />
<img src="img/show/0/2.jpg" alt="" />
<img src="img/show/0/3.jpg" alt="" />
<img src="img/show/0/4.jpg" alt="" />
<img src="img/show/0/5.jpg" alt="" />
</div>
</div>
<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var flag = true;//控制的是next多次点击
var flag2 = true;//控制的是pre多次点击
$("#albumout>span").click(function(){
var index = $(this).index();
$("#showBox img").each(function(){
$(this).attr("src","img/show/"+index+"/"+($(this).index()+1)+".jpg");
})
$("#cover").fadeIn(500);
$("#albuminner").fadeIn(500);
})
$("#cover").click(function(){
$(this).fadeOut(500);
$("#albuminner").fadeOut(500);
})
$("#prev").click(function(e){
var e = e||window.event;
e.stopPropagation();
if(flag2)
{
$("#showBox img").first().stop().animate({"left":"-510"},500,function(){
$("#showBox").append($(this));
$(this).animate({"left":"0"},500);
flag2 =true;
});
$("#showBox").stop().animate({"left":"240"},500,function(){
$(this).animate({"left":"0"},500);
});
flag2 = false;
}
})
$("#next").click(function(e){
var e = e||window.event;
e.stopPropagation();
if(flag)
{
$("#showBox img").last().stop().animate({"left":"510"},500,function(){
$("#showBox").prepend($(this));
$(this).animate({"left":"0"},500);
flag = true;
});
$("#showBox").stop().animate({"left":"-240"},500,function(){
$(this).animate({"left":"0"},500);
});
flag = false;
}
})
</script>
</body>
</html>效果略有区别：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
background: url(img/bg.jpg);
background-size: cover;
}
html{
height: 100%;
}
#ablumouter{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 702px;
height: 516px;
overflow: hidden;
}
#ablumouter span{
width: 230px;
height:172px;
float: left;
padding: 2px;
}
#ablumouter span img{
width: 230px;
height: 172px;
}
#cover{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: none;
}
#pre{
position: absolute;
left: 100px;
top: 50%;
margin-top: -50px;
font-size: 40px;
border-radius: 10px;
width: 50px;
height: 100px;
text-align: center;
color: white;
line-height: 100px;
box-shadow: rgb(255,255,255) 0px 0px 30px 3px;
}
#next{
position: absolute;
right: 100px;
top: 50%;
margin-top: -50px;
font-size: 40px;
border-radius: 10px;
width: 50px;
height: 100px;
text-align: center;
color: white;
line-height: 100px;
box-shadow: rgb(255,255,255) 0px 0px 30px 3px;
}
#albuminner{
position: relative;
margin:10% auto 0;
width: 500px;
height: 375px;
display: none;
}
#showBox{
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 375px;
}
#albuminner img{
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 375px;
}
</style>
</head>
<body>
<div id="ablumouter">
<span><img src="img/main/1.jpg" alt="" /></span>
<span><img src="img/main/2.jpg" alt="" /></span>
<span><img src="img/main/3.jpg" alt="" /></span>
<span><img src="img/main/4.jpg" alt="" /></span>
<span><img src="img/main/5.jpg" alt="" /></span>
<span><img src="img/main/6.jpg" alt="" /></span>
<span><img src="img/main/7.jpg" alt="" /></span>
<span><img src="img/main/8.jpg" alt="" /></span>
<span><img src="img/main/9.jpg" alt="" /></span>
</div>
<div id="cover">
<span id="pre"><</span> <span id="next">></span>
</div>
<div id="albuminner">
<div id="showBox">
<img src="img/show/0/1.jpg" alt="" />
<img src="img/show/0/2.jpg" alt="" />
<img src="img/show/0/3.jpg" alt="" />
<img src="img/show/0/4.jpg" alt="" />
<img src="img/show/0/5.jpg" alt="" />
</div>
</div>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
var flag = true;
$("#ablumouter>span").click(function(){
var index= $(this).index();
$("#showBox img").each(function(){
$(this).attr("src","img/show/"+index+"/"+($(this).index()+1)+".jpg")
})
$("#cover").fadeIn(500);
$("#albuminner").fadeIn(500);
})
$("#cover").click(function(){
$(this).fadeOut(500);
$("#albuminner").fadeOut(500);
})
$("#next").click(function(e){
var e= e||window.event;
e.stopPropagation();
if(flag)
{
$("#showBox img").last().animate({"left":"510"},500,function(){
$("#showBox").prepend($(this));
$(this).animate({"left":"0"},500)
//当图片展开的时候
flag = true;
})
$("#showBox").animate({"left":"-260"},500,function(){
$(this).animate({"left":"0"})
})
flag = false;
}
})
$("#pre").click(function(e){
var e = e|| window.event;
e.stopPropagation();
if(flag){
$("#showBox").animate({"left":"-260"},500,function(){
$(this).animate({"left":"0"},500)
//当展开的时候
flag = true;
});
$("#showBox img").first().animate({"left":"510"},500,function(){
$("#showBox").append($(this));
$(this).animate({"left":"0"},500);
})
flag = false;
}
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android中UDP通信
- 广播的最佳实践——实现强制下线功能
- 用java实现简单记事本的编写
- SQLServer: 用 PARSENAME 实现字符串截取（<=4个）
- nfs +nis+ssh（2）
- macbook pro安装win8.1
- 看完让你彻底搞懂Websocket原理
- Android相关中文文档网址
- 问题一
- 使用multipart/form-data上传文件
- Ext.Net学习笔记07：Ext.Net DirectMethods用法详解
- jq hover方法用法 例子
- 常用项目管理工具
- OOD、OOP、AOP区别
- C/C++获取当前系统时间
- Zend Framework教程之Application和Bootstrap用法详解
- Linux用户和权限管理
- 进制转换练习
- iOS开发-appDelegate的生命周期总结
- play方法播放