图片堆叠效果实现
2019-02-26 本文已影响0人
毕安
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<style type="text/css">
.img2{
animation-duration: 0.5s;
animation-delay: 0.5s;
animation-iteration-count: 1;
}
.img3{
animation-duration: 0.5s;
animation-delay: 1s;
animation-iteration-count: 1;
}
.img4{
animation-duration: 0.5s;
animation-delay: 1.5s;
animation-iteration-count: 1;
}
.img5{
animation-duration: 0.5s;
animation-delay: 2s;
animation-iteration-count: 1;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" ></script>
</head>
<body style="background-color: #232639;margin:0;padding:0;">
<div class="container3-1" style="float:left">
<div>
<img class="img1" style="position:absolute;z-index:1;float:left" src="img/bg-exhibition-1.png">
<img class="img2" style="position:absolute;z-index:2;float:left" src="img/bg-exhibition-2.png">
<img class="img3" style="position:absolute;z-index:3;float:left" src="img/bg-exhibition-3.png">
<img class="img4" style="position:absolute;z-index:4;float:left" src="img/bg-exhibition-4.png">
<img class="img5" style="position:absolute;z-index:5;float:left" src="img/bg-exhibition-5.png">
</div>
</div>
<script type="text/javascript">
var srcArr = [
['img/bg-exhibition-1.png','img/bg-exhibition-2.png','img/bg-exhibition-3.png','img/bg-exhibition-4.png','img/bg-exhibition-5.png'],
['img/bg-hall-1.png','img/bg-hall-2.png','img/bg-hall-3.png','img/bg-hall-4.png','img/bg-hall-5.png'],
['img/bg-service-1.png','img/bg-service-2.png','img/bg-service-3.png','img/bg-service-4.png','img/bg-service-5.png']];
var index = 0;
function animateCSS(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add('animated', animationName)
function handleAnimationEnd() {
node.classList.remove('animated', animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function') callback()
}
node.addEventListener('animationend', handleAnimationEnd)
}
var change = function() {
$(".img1").attr("src",srcArr[index][0]);
$(".img2").attr("src",srcArr[index][1]);
$(".img3").attr("src",srcArr[index][2]);
$(".img4").attr("src",srcArr[index][3]);
$(".img5").attr("src",srcArr[index][4]);
animateCSS('.img2', 'fadeInDown');
animateCSS('.img3', 'fadeInDown');
animateCSS('.img4', 'fadeInDown');
animateCSS('.img5', 'fadeInDown');
setTimeout(function(){
animateCSS('.img2', 'fadeInDown');
animateCSS('.img3', 'fadeInDown');
animateCSS('.img4', 'fadeInDown');
animateCSS('.img5', 'fadeInDown');
}, 3050);
setTimeout(function(){
animateCSS('.img2', 'fadeInDown');
animateCSS('.img3', 'fadeInDown');
animateCSS('.img4', 'fadeInDown');
animateCSS('.img5', 'fadeInDown');
}, 6100);
index++;
index %= 3;
}
change();
setInterval(change,10000);
</script>
</body>
</html>
效果如下：
