jquery+css3图片弹出切换

<div class="content"></div>
<div class="box">
<div></div>
</div>

<style> 
body,.content {
overflow: hidden;
}
.content {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: blur(15px);
transition: opacity .3s;
}
.box {
position: absolute;
width: 650px;
height: 400px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: cover;
box-shadow: 0 0 0 8px rgba(0,0,0,.3);
z-index: 1;
cursor: pointer;
}
.box.active {
animation: anim 1.2s linear
}
@keyframes anim {
0% {transform:translate(-50%, -50%) scale(1);left:50%}
20% {transform:translate(-50%, -50%) scale(.8);left:50%}
50% {transform:translate(-100%, -50%) scale(.8);left:0;}
51% {transform:translate(0, -50%) scale(.8);left:100%;opacity:0}
80% {transform:translate(-50%, -50%) scale(.8);left:50%}
}
.box div {
position: absolute;
width: 100px;
height: 40px;
top: 15px;
left: -8px;
background: #444;
text-align: center;
font: 13pt Verdana;
color: #fff;
line-height: 40px;
}
 </style>
<script type="text/javascript">
var img = [
'http://ufa-welcome.ru/wp-content/uploads/2015/10/2428965887.jpg',
'http://cp12.nevsepic.com.ua/90/1350061536-norway_by_lonelywolf2.jpg',
'https://pp.vk.me/c625218/v625218343/424f8/ePczSL4LTyI.jpg',
'https://cs7053.vk.me/c540105/v540105409/19410/Vl11UIxlO3A.jpg',
'https://pp.vk.me/c621631/v621631794/20733/3zd3HnDwqwI.jpg'
];

$('.content,.box').css('background-image','url('+img[0]+')');
$('.box div').text('1/'+img.length);
var ind = 0;
$('.box').click(function() {
$(this).addClass('active');
ind++
if (ind+1>img.length) ind=0;
setTimeout(function() {
$('.box').css('background-image','url('+img[ind]+')');
$('.box div').text((ind+1)+'/'+img.length);
setTimeout(function() {
$('.content').css('background-image','url('+img[ind]+')');
setTimeout(function() {$('.box').removeClass('active')},50)
},550);
},600)
})

</script>