您的位置：首页 > Web前端 > JQuery

jQuery动画切换效果

2017-09-30 13:57 323 查看

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册切换效果</title>
<style>
* {
margin: 0px;
padding: 0px;
}

li {
list-style: none;
}

a {
text-decoration: none;
}

body {
background: url('images/bg.jpg') no-repeat;
height: 100%;
width: 100%;
}

ul#pic_con {
overflow: hidden;
width: 750px;
height: 560px;
margin: 40px auto;
}

ul#pic_con li {
float: left;
width: 238px;
height: 169px;
margin: 6px;
background: #fff;
box-shadow: 0 0 20px #fff;
border-radius: 6px;
}

ul#pic_con li img {
width: 230px;
height: 159px;
padding: 4px;
}

#bg {
width: 100%;
height: 100%;
background: rgba(0,0,0,.4);
position: absolute;
top: 0px;
left: 0px;
display: none
}

/*翻页相册*/
.big_pic {
width: 800px;
margin: 0 auto;
position: relative;
}

.big_pic ul {
width: 650px;
height: 450px;
margin: 40px auto;
position: relative;
}

.big_pic ul li {
width: 650px;
height: 450px;
padding: 5px;
position: absolute;
top: 0px;
left: 0px;
}

.big_pic ul li img {
width: 650px;
height: 450px;
}

.big_pic a {
display: block;
width: 60px;
height: 90px;
line-height: 90px;
text-align: center;
position: absolute;
font-size: 30px;
color: #fff;
background: rgba(0,0,0,.5);
font-weight: 900;
box-shadow: 0 0 15px #fff;
border-radius: 4px;
}

.big_pic a.prve {
top: 50%;
margin-top: -45px;
left: 0px;
}

.big_pic a.next {
top: 50%;
margin-top: -45px;
right: 0px;
}
</style>
</head>
<body>
<ul id="pic_con">
<li><img src="images/main/1.jpg" alt=""></li>
<li><img src="images/main/2.jpg" alt=""></li>
<li><img src="images/main/3.jpg" alt=""></li>
<li><img src="images/main/4.jpg" alt=""></li>
<li><img src="images/main/5.jpg" alt=""></li>
<li><img src="images/main/6.jpg" alt=""></li>
<li><img src="images/main/7.jpg" alt=""></li>
<li><img src="images/main/8.jpg" alt=""></li>
<li><img src="images/main/9.jpg" alt=""></li>
</ul>

<div id="bg">
<div class="big_pic">
<ul>
<li><img src="images/show/1/1.jpg" alt=""></li>
<li><img src="images/show/1/2.jpg" alt=""></li>
<li><img src="images/show/1/3.jpg" alt=""></li>
<li><img src="images/show/1/4.jpg" alt=""></li>
<li><img src="images/show/1/5.jpg" alt=""></li>
</ul>
<a href="javascript:;" class="prve"><</a>
<a href="javascript:;" class="next">></a>
</div>
</div>
</body>
</html>
<script  src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
$('#pic_con li').click(function() {
var index = $(this).index();
for (var p = 0; p < 5; p++) {
var url = 'images/show/' + index + '/' + (p + 1) + '.jpg';
$('.big_pic li').eq(p).find('img').attr('src', url)
}
$('#bg').fadeIn(600);
});
//下切换
$('a.next').click(function() {
$('.big_pic ul li:last').animate({
"left": "100%"
},
600,
function(event) {
$(this).animate({
'left': '0'
},
600);
$('.big_pic ul').prepend($(this))
});
$('.big_pic ul').animate({
'left': '-40%'
},
600);
$('.big_pic ul').animate({
'left': '0'
},
600);
event.stopPropagation()
});
//上切换
$('a.prve').click(function() {
$('.big_pic ul li:last').animate({
"left": "-100%"
},
600,
function(event) {
$(this).animate({
'left': '0'
},
600);
$('.big_pic ul').prepend($(this));
});
$('.big_pic ul').animate({
'left': '40%'
},
600);
$('.big_pic ul').animate({
'left': '0'
},
600);
event.stopPropagation();
});
//点击消失
$('#bg').click(function() {
$(this).fadeOut(600);
})
})
</script>


运行结果:



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航