制作滚动轮播图
用js和动画制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
width: 800px;
height: 300px;
margin: 100px auto;
background-color: orange;
border: 5px solid lightblue;
position: relative;
}
#carousel_content{
position: relative;
width: 100%;
height: 100%;
}
#carousel_content img{
width: 100%;
height: 100%;
position: absolute;
}
#carousel_content>a{
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
}
/* keyframes关键帧，关键影格，键架 */
@keyframes disappear {
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
#carousel_indicator{
width: 60px;
height: 30px;
/* red; */
position: absolute;
right: calc(50% - 50px);
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
#carousel_indicator>div{
width: 5px;
height: 5px;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 0 5px black;
}
#carousel_indicator>div:nth-child(1){
background-color: orange;
}
</style>
</head>
<body>
<div id="box">
<!-- 轮播的图片 -->
<div id="carousel_content">
<a href=""><img src="01.jpg" alt=""></a>
<a href=""><img src="02.jpg" alt=""></a>
<a href=""><img src="03.jpg" alt=""></a>
<a href=""><img src="04.jpg" alt=""></a>
</div>
<!-- 指示灯 -->
<div id="carousel_indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script>
var box = document.getElementById('carousel_content');
var a_all = document.querySelectorAll('#carousel_content>a');
var indicators = document.querySelectorAll('#carousel_indicator>div')
var index = 0;//记录定时器执行的次数
var lastIndicator = document.querySelector('#carousel_indicator>div:nth-child(1)');//记录上次亮起的指示灯
// 开启定时器,每隔两秒切换一张图片
setInterval(function(){
// 保证索引值是在[0,3]，把0123，改成3210
var idx = 3 - index % 4;
// 找一张本次要轮播的图片
var a = a_all[idx];
// 找到本次要亮起的指示灯
var indicator = indicators[(index+1) % 4];
// alert(idx)
// linear匀速执行
a.style.animation = "disappear 1s linear both"
indicator.style.backgroundColor = 'orange';
//把上一次亮起的指示灯灭掉
if(lastIndicator != null){
lastIndicator.style.backgroundColor = 'transparent';
}
lastIndicator = indicator;//记录下亮起的指示灯
// 当当前图片消失之后立马把它放到最开始的位置,然后把透明度改回来
setTimeout(function(){
// 把当前已经动画消失的图片移动到最后去(因为图片堆叠的顺序是从后往前堆叠的,也就是最后一个img标签在最上边...)
var temp = document.querySelector('#carousel_content>a:nth-child(1)');
box.insertBefore(a,temp);
// 把图片的透明度改回来,改为1,不用a.style.opacity = '1',的原因是此处使用的动画修改的透明度,并且为了保障动画结束之后维持透明的状态,所以把fill-mode设置为了both,所以要想让透明度改回来,做法应该把fill-mode恢复默认或是直接把animation设置为空。
a.style.animationFillMode = ''
// a.style.animation = ''
},1000)
// 让定时器累积计数
index++;
},2000)
</script>
</body>
</html>
用css和动画制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div{
width: 100%;
height: 460px;
animation: xm 25s infinite;/*infinite无限的*/
}
@keyframes xm{
0%{
background: url(01.jpg);
background-size: cover;
}
25%{
background: url(02.jpg);
background-size: cover;
}
50%{
background: url(03.jpg);
background-size: cover;
}
75%{
background: url(04.jpg);
background-size: cover;
}
100%{
background: url(https://b-ssl.duitang.com/uploads/item/201208/30/20120830173930_PBfJE.jpeg);
background-size: cover;
}
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
