<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用数组切换图片</title>
<style>
*{
padding: 0;
margin: 0;
}
#container{
width: 600px;
height: 300px;
border: 3px solid #666;
margin: 20px auto;
position: relative;
}
img{
border: 3px solid #000;
border-radius: 50%;
position: absolute;
animation-fill-mode: forwards;
transition: all 1s;
}
img:nth-child(1){
top: 70px;
left: 118px;
/* transform: scale(0.8, 0.8); */
z-index: 1;
opacity: 0.3;
}
img:nth-child(2){
top: 75px;
left: 225px;
/* transform: scale(1, 1); */
z-index: 3;
opacity: 1;
}
img:nth-child(3){
top: 70px;
left: 331px;
/* transform: scale(0.8, 0.8); */
z-index: 1;
opacity: 0.3;
}
a{
display: inline-block;
background-color: #000;
opacity: 0.5;
text-decoration: none;
color: #fff;
font-size: 36px;
font-weight: bold;
position: absolute;
top: 50%;
}
a:nth-of-type(1){
right: 0;
}
/* img.active0{
animation: active0 0.8s;
animation-fill-mode: forwards;
}
@keyframes active0{
100% {top: 75px;left: 225px;transform: scale(1, 1);opacity: 1;z-index: 3;}
}
img.active1{
animation: active1 0.8s;
animation-fill-mode: forwards;
}
@keyframes active1{
100% {top: 70px;left: 331px;transform: scale(0.8, 0.8);opacity: 0.3;z-index: 1;}
}
img.active2{
animation: active2 0.8s;
animation-fill-mode: forwards;
}
@keyframes active2{
100% {top: 70px;left: 118px;transform: scale(0.8, 0.8);opacity: 0.3;z-index: 1;}
} */
.scale{
transform: scale(0.8, 0.8);
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script>
$(function () {
var imgs = $("#container>img");
var next = $("#container>a:first");
var perv = $("#container>a:last");
var arr = [
{"top":"75px","left":"225px","opacity":"1","z-index":"3"},
{"top":"70px","left":"331px","opacity":"0.3","z-index":"1"},
{"top":"70px","left":"118px","opacity":"0.3","z-index":"1"}
];
var arrClass = [ "addClass", "removeClass", "addClass" ];
next.click(function () {
if (imgs.is(":animated")) {
alert(1);//无效
}
imgs.eq(0).animate(arr[0], 100, function () {
$(this)[arrClass[0]]('scale');
})
imgs.eq(1).animate(arr[1], 100, function () {
$(this)[arrClass[1]]('scale');
})
imgs.eq(2).animate(arr[2], 100, function () {
$(this)[arrClass[2]]('scale');
})
arr.push(arr.shift());
arrClass.push(arrClass.shift());
return false;
})
perv.click(function () {
imgs.eq(0).animate(arr[1], 100, function () {
$(this)[arrClass[0]]('scale');
})
imgs.eq(1).animate(arr[2], 100, function () {
$(this)[arrClass[1]]('scale');
})
imgs.eq(2).animate(arr[0], 100, function () {
$(this)[arrClass[2]]('scale');
})
arr.unshift(arr.pop());
arrClass.unshift(arrClass.pop());
return false;
})
})
</script>
</head>
<body>
<div id="container">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491019968231&di=f6fc50430c35749c219f0217d1fb5a51&imgtype=0&src=http%3A%2F%2F2t.5068.com%2Fuploads%2Fallimg%2F151210%2F1-151210164510.jpg" alt="" width="150" height="150" class="scale">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491019968231&di=f44b3a4766227087eed330d97c969a74&imgtype=0&src=http%3A%2F%2Fpic2.52pk.com%2Ffiles%2F131220%2F1283568_103405_8845.jpg" alt="" width="150" height="150">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491019968231&di=37beec62f989bbd8e6e3c1d6c149af06&imgtype=0&src=http%3A%2F%2Fpic2.52pk.com%2Ffiles%2F131220%2F1283568_103407_3114.jpg" alt="" width="150" height="150" class="scale">
<a href="">></a>
<a href=""><</a>
</div>
</body>
</html>不停点击的时候就出现bug，想让里面的img动画执行完了再点击再继续执行，怎么写？
添加回答
举报
0/150
提交
取消