JavaScript实现轮播图

html部分

<img src="img/1.jpg" title="">
//这是控制图片的切换
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

css部分

*{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
	float: left;
	width: 30px;
	height: 30px;
	margin: auto;
	border: 1px solid gray;
	text-align: center;
	line-height: 30px; 
	margin-left: 30px;
	cursor: pointer;
}
li:first-child{
	margin-left: 100px;
}
ul{
	width: 500px;
	height: 30px;
}

js代码部分

//在这之前，要先在自己的文件夹里放几张图片，图片的名字最好有规律，方便后面使用
var img = document.getElementsByTagName('img')[0];
var lis = document.getElementsByTagName('li');
//为这几个小方格绑定点击事件
for(var i=0;i<lis.length;i++){
	lis[i].onclick = change;
}
//点击切换图片
function change(){
	// 点击这个图标之后，使图片按照当前顺序轮播
	n = this.innerHTML;
	this.style.borderColor = 'orange'
	// 点击当前图标，图片切换为当前图标对应的图片
	img.src = 'img/' + this.innerHTML + '.jpg';
	for(var j=0;j<lis.length;j++){//遍历这几个图标
		//如果当前图标边框颜色为橘色
		if(this.style.borderColor = 'orange'){
		//其他图标边框颜色为灰色
			lis[j].style.borderColor = 'gray'
		}
		this.style.borderColor = 'orange'
	}
}
//当前切换到哪张图片，哪个图标就亮
var n = 0;
lis[n].style.borderColor = 'orange'
//轮播图
function show(){
	n ++;
	lis[n-1].style.borderColor = 'orange'
	for(var s=0;s<lis.length;s++){
		if(lis[n-1].style.borderColor = 'orange'){
			lis[s].style.borderColor = 'gray'
		}
		lis[n-1].style.borderColor = 'orange'
	}
	img.src = 'img/' + n + '.jpg';
	//当最后一张图片切换完之后，再次将n变为0，这样就可以继续图片的切换了
	if(n>=5){
		n = 0;
	}
}
//鼠标移入
img.onmouseover = function(){
	clearInterval(timer);
}
// 鼠标移出
img.onmouseout = function(){
	timer = setInterval(show,2000)
}
//创建定时器，在不干涉的情况下，2秒执行一次show函数
var timer = setInterval(show,2000)

运行效果