js timer has the following two methods:
setInterval (): the specified period (in milliseconds) to the calling function or calculation expression. The method will continue to call the function, until the clearInterval () is called, or the window is closed. cycle
setTimeout (): calling function or the calculation expression after a specified number of milliseconds. single
usage:
var time = setInterval（function（）{
Need content loop
}, 1000) a number of milliseconds per cycle
Thus, using the timer to complete FIG rotation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>setTnterval</title>
<style>
h1{
width: 300px;
margin: auto;
}
div{
width: 1000px;
height: 600px;
margin: 50px auto;
}
p{
display: inline-block;
width: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 document.getElementsByTagName A = ( "P")
function fun () {// each run before the color is white navigation tranches
for (var J = 0; J <a.length; J ++) {
A [J] = .style.backgroundColor '#fff'
}
}
function Funny (p) {// click navigation Kuaikuai switching
for (var I = 0; I <a.length; I ++) {
(function (I) {
A [I] .onclick = function () {
the clearInterval (P);
Fun ();
A [I] .style.backgroundColor = '# 00F';
div.innerHTML = "<IMG the 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>
The code switching directly, i.e. without sliding effect rotation of the left and right in FIG.
In the future I will switchable carousel figure also issued to