js 定时器有以下两个方法：
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。循环
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。单次
用法：
var time = setInterval（function（）{
需要循环的内容
}，1000）每循环一次的毫秒数
因此，使用定时器可以完成轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>setTnterval</title>
<style>
h1{
300px;
margin: auto;
}
div{
1000px;
height: 600px;
margin: 50px auto;
}
p{
display: inline-block;
30px;
height: 30px;
background-color: #fff;
border-radius: 30px;
position: relative;
top: -95px;
left: 40%;
margin-left: 10px;
}
</style>
</head>
<body>
<h1>轮播图</h1>
<div></div>
<p id="p0"></p>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<script>
var a = document.getElementsByTagName("p")
function fun(){//每次运行前导航块块颜色为白
for(var j = 0;j<a.length;j++){
a[j].style.backgroundColor = '#fff'
}
}
function funny(p){//点击导航块块切换
for(var i = 0;i<a.length;i++){
(function (i){
a[i].onclick = function(){
clearInterval(p);
fun();
a[i].style.backgroundColor = '#00f';
div.innerHTML = "<img src='timg"+i+".jpg' width = '1000px' height = '600px'>";
timer(i);
}
})(i)
}
}
var div = document.getElementsByTagName('div')[0];
var i = 0;
function timer(i){//定时器
var photo = setInterval(function(){
fun();
i<5?div.innerHTML = "<img src='timg"+i+".jpg' width = '1000px' height = '600px'>":i=0;
div.innerHTML = "<img src='timg"+i+".jpg' width = '1000px' height = '600px'>";
a[i].style.backgroundColor = '#00f'
i = ++i;
},1000);
div.onmouseover = function(){//鼠标进入事件
clearInterval(photo);
};
div.onmouseout = function(){//鼠标移开事件
timer(i);
};
funny(photo);
}
timer();
</script>
上述代码为直接进行切换，即无左右滑动效果的轮播图
今后我会将切换式的轮播图也发出来