轮播效果及原理的分析：
1.定时器：反复性定时器；
2.页面加载完成之后才回去切换图片：onload事件；
3.鼠标放到图片上，图片停止切换；鼠标离开图片，图片继续切换（动起来）；
4.鼠标放到列表上，图片停止到对应的图片，列表标的背景颜色也要改变；
5.鼠标离开列表，图片继续自动切换，列表标背景颜色也自动切换；
第1步：通过定时器实现自动切换：
效果：
源码：
<script type="text/javascript">
//页面加载完成之后让图片动起来
window.onload = init;
var i = 1;
function init(){
window.setInterval("tupian()",1000);
}
//让图片切换的函数
function tupian(){
//获取img对象
var obj = document.getElementById("d1");
i++;
//自己写的，%6取余思想，略微绕完了
//i = i%6;
//if (i == 0)
// i++;
//推荐写法：当溢出时，重新给i赋值为1；
if (i>5) {
i = 1;
}
obj.src = "images/"+i+".png";
}
</script>
<body>
<img id="d1" alt="images/1.png" src="images/1.png">
</body>
第2步：鼠标放图片上停止自动切换：
源码：
function stopTo(){
window.clearInterval(timer);
}
//鼠标离开继续切换
function starTo(){
init();
}
</script>
<body>
<img id="d1" alt="images/1.png" src="images/1.png" onmouseover="stopTo()" onmouseout="starTo()">
</body>
第3步：增加对应标号，当鼠标悬浮在标号上时停止切换并显示出对应图片：
源码：
<style type="text/css">
div{
border: 1px solid red;
width: 660px;
}
div ul{
float: right;
}
ul li{
list-style: none;
border: 1px solid black;
width: 18px;
height: 22px;
text-align: center;
text-height: 22px;
}
</style>
function tingtu(e){
var obj = document.getElementById("d1");
//obj.src = "images/1.png";
var num = e.innerHTML;
obj.src = "images/"+num+".png";
window.clearInterval(timer);
}
<body>
<div>
<img id="d1" src="images/1.png" onmouseover="stopTo()" onmouseout="starTo()">
<ul>
<li onmouseover="tingtu(this)">1</li>
<li onmouseover="tingtu(this)">2</li>
<li onmouseover="tingtu(this)">3</li>
<li onmouseover="tingtu(this)">4</li>
<li onmouseover="tingtu(this)">5</li>
</ul>
</div>
</body>
第4步：鼠标离开li标签时，图片自动切换：
在li中添加onmouseout事件
需要注意的是：在上一步的停图时，我们需要将所停的图片记录下来，接下来继续依次切换，而不是直接在原有基础上进行切换；
第5步：鼠标停留li标签时，标签改变颜色：
首先获取所有的li标签，并把其背景颜色统一；在onmouseover时通过this将当前li背景颜色突出：
源码：
for (var i = 1; i <= 5; i++) {
var obj = document.getElementById("li"+i);
obj.style.background = "white";
}
e.style.background = "orange";
第6步：当图片自动切换时，对应的标签改变背景颜色：
首先在切换时把所有的背景颜色统一，然后获取到当前切换的图片对应的li，进行背景色设置：
完整源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
div{
border: 1px solid red;
width: 660px;
}
div ul{
float: right;
}
ul li{
list-style: none;
border: 1px solid black;
width: 18px;
height: 22px;
text-align: center;
text-height: 22px;
}
</style>
<script type="text/javascript">
//页面加载完成之后让图片动起来
window.onload = init;
var i = 1;
var timer;
function init(){
var obj = document.getElementById("li1");
obj.style.background = "orange";
timer = window.setInterval("tupian()",500);
}
//让图片切换的函数
function tupian(){
//获取img对象
var obj = document.getElementById("d1");
i++;
//自己写的，%6取余思想，略微绕完了
//i = i%6;
//if (i == 0)
// i++;
//推荐写法：当溢出时，重新给i赋值为1；
if (i>5) {
i = 1;
}
obj.src = "images/"+i+".png";
clearlicolor();
var licolor = document.getElementById("li"+i);
licolor.style.background = "orange";
}
//鼠标放上停止切换
function stopTo(){
window.clearInterval(timer);
}
//鼠标离开继续切换
function starTo(){
timer = window.setInterval("tupian()",500);
}
function tingtu(e){
var obj = document.getElementById("d1");
//obj.src = "images/1.png";
var num = e.innerHTML;
i = num;
obj.src = "images/"+num+".png";
clearlicolor();
e.style.background = "orange";
window.clearInterval(timer);
}
//清除所有标签的背景颜色
function clearlicolor(){
for (var i = 1; i <= 5; i++) {
var objli = document.getElementById("li"+i);
objli.style.background = "white";
}
}
</script>
</head>
<body>
<div>
<img id="d1" src="images/1.png" onmouseover="stopTo()" onmouseout="starTo()">
<ul>
<li id="li1" onmouseover="tingtu(this)" onmouseout="starTo()">1</li>
<li id="li2" onmouseover="tingtu(this)" onmouseout="starTo()">2</li>
<li id="li3" onmouseover="tingtu(this)" onmouseout="starTo()">3</li>
<li id="li4" onmouseover="tingtu(this)" onmouseout="starTo()">4</li>
<li id="li5" onmouseover="tingtu(this)" onmouseout="starTo()">5</li>
</ul>
</div>
</body>
</html>
效果图：
注：仅供个人学习使用，转载请注明出处