hi,这里是X，接着来玩轮番图噢😛，有兴趣的朋友也可以去看看我写的前一篇文章，也是实现轮番图的，对比学习一下：HTML实现轮播图的方法：纯CSS实现+js实现（鼠标点击时停止自动轮播/自动轮播）第一篇
这篇文章的轮番图做法和平常的一些可能会不太一样，因为它的body部分长这样：
<div id="pic">
<img src=""/>
<ul>
</ul>
</div>
不要太惊讶，如果有喜欢body极简化、喜欢写脚本的朋友有福气啦😎
我个人而言的话，也还挺喜欢的，以下是效果图:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用定时器实现图片轮播</title>
<style>
ul{margin:0;padding:0;}
li{display:inline-block;}
body{background:#333;}
/* 外层容器和图片都要设置好高度和宽度！ */
#pic{width:300px;height:206px; margin:0 auto;}
#pic img{width:300px;height:206px;}
#pic ul{margin-top:10px;text-align:center;}
#pic .item,#pic .active{width:9px;height:9px;cursor: pointer;
border-radius:10px;margin:1px 1px 1px 8px;}
#pic .item {background:#FFF;}
#pic .active {background: #F60;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('pic');// 得到最外层容器
var oImg = oDiv.getElementsByTagName('img')[0];// 得到图片
var oUl = oDiv.getElementsByTagName('ul')[0];// 得到ul
var arrUrl = ['images/p1.jpg','images/p2.jpg','images/p3.jpg','images/p4.jpg'];
var aLi = oDiv.getElementsByTagName('li');
var num = 0;
// 表示当前的下标--->图片和按钮
var timer = null;//定时器
//生成对应图片个数的列表项 按钮
for(var i = 0; i < arrUrl.length; i++){
oUl.innerHTML += "<li class = 'item'></li>";
}
//初始化
function fnTab(){
oImg.src = arrUrl[num];
for(var i = 0; i < aLi.length; i++){
aLi[i].className = 'item';
//首先全部清空活动状态
}
aLi[num].className = 'item active';//然后设置当前li为活动状态
}
fnTab();//调用函数实现初始化设置
// 实现点击哪个按钮，就显示哪张图片功能
for(var j = 0; j < aLi.length; j++){
aLi[j].index = j;//为每个列表项自定义索引属性，属性值和数组下标一一对应
aLi[j].onclick = function(){
num = this.index;//将当前li的索引属性值赋给变量num
fnTab();
};
}
// 自动播放
function autoPlay(){ //使用定时器实现每隔2秒自动切换图片
timer = setInterval(function(){
num++;
num %= arrUrl.length; // 防止下标溢出
fnTab();
},2000);
}
autoPlay();//调用自动切换图片函数
oImg.onmouseover = function(){//鼠标移到图片上停止图片切换
clearInterval(timer);
}
oImg.onmouseout = autoPlay;//鼠标移开图片后继续自动切换图片，注意这里是没有括号的噢
};
</script>
</head>
<body>
<div id="pic">
<img src=""/>
<ul>
</ul>
</div>
</body>
</html>