我写的一个网页轮播图,用animation设置了动画效果,如何实现切换图片时暂停3秒钟,再进行切换,还有如何让下面的正方形也跟着切换(标题太长写不完)
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#box1 {
/*设置宽和高*/
width: 520px;
height: 333px;
/*居中*/
margin: 50px auto;
/*设置背景颜色*/
background-color: greenyellow;
/*设置padding*/
padding: 10px 0px;
/*开启相对定位*/
position: relative;
overflow: hidden;
}
#pl{
/* width: 2600px; */
display: flex;
position: absolute;
left: 0;
transition:1s all ;
animation: test 12s infinite ;
}
#pl li{
/* float: left; */
margin: 0 10px;
}
#dian{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
#dian a{
display: inline-block;
width: 15px;
height: 15px;
background-color: crimson;
margin: 0 2px;
/* position: absolute; */
opacity: 0.5;
}
#dian a:hover{
background-color: black;
}
@keyframes test{
/* from是动画的开始位置 也可以用0%表示 */
from{
left:0px ;
}
/* to是动画的结束位置 也可以是用100%*/
to{
left: -2600px;
}
}
</style>
<script type="text/javascript">
window.onload=function(){
var dian = document.getElementById("dian");
var pl = document.getElementById("pl");
var allA = document.getElementsByTagName("a");
var imgArr=document.getElementsByTagName("img");
pl.style.width = 520*imgArr.length+"px";
var index = 0;
allA[index].style.backgroundColor = "black";
for(var i=0 ; i<allA.length; i++){
allA[i].num=i;
allA[i].onclick = function(){
index = this.num;
pl.style.left=-520*index +"px" ;
setA();
}
};
function setA(){
//遍历所有a，并将它们的背景颜色设置为红色
for(var i=0 ; i<allA.length ; i++){
allA[i].style.backgroundColor = "";
}
//将选中的a设置为黑色
allA[index].style.backgroundColor = "black";
};
}
</script>
</head>
<body>
<div id="box1">
<ul id="pl">
<li><img src="./img/1.jpg" /></li>
<li><img src="./img/2.jpg" /></li>
<li><img src="./img/3.jpg" /></li>
<li><img src="./img/4.jpg" /></li>
<li><img src="./img/5.jpg" /></li>
<li><img src="./img/1.jpg" /></li>
</ul>
<div id="dian">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
轮播要用到定时器的