js写一个淘宝大小图轮播

鼠标移入下边的小图，就在上方显示大图，有自动切换，没有放大镜，效果如下

css

<style>
	*{margin:0;padding:0;}
	li{list-style: none;}
	.box{width:430px;height:430px;position:relative;border:1px solid pink;margin:0 auto;}
	.box>img{display:block;position:absolute;top:0;left:0;}
	ul.small{width:450px;height:60px;margin:10px auto;}
	ul.small>li{width:60px;height:60px;float:left;margin:0px 15px;}
	ul.small>li>img{width:100%;display:block;}
	ul.small>li.active{outline:2px solid black;}
</style>

html

<div class="box">
	<img src="img/1.jpg" alt="">
</div>
<ul class="small">
	<li class="active"><img src="img/1.jpg" alt=""></li>
	<li><img src="img/2.jpg" alt=""></li>
	<li><img src="img/3.jpg" alt=""></li>
	<li><img src="img/4.jpg" alt=""></li>
	<li><img src="img/5.jpg" alt=""></li>
</ul>

js

<script>
	var banner = document.getElementsByClassName('box')[0].getElementsByTagName('img')[0];
	var small = document.getElementsByClassName('small')[0].getElementsByTagName('li');
	var i = 0;
	
	// 封装函数run ,实现轮播图的自动切换
	function run(){
		i++;
		// 判断是否超过范围
		if(i>=small.length){
			i=0;
		}
		// 清除默认的显示样式
		for(var j=0;j<small.length;j++){
			small[j].removeAttribute('class');
		}
		var path = small[i].firstChild.getAttribute('src')
		small[i].setAttribute('class','active');
		// 设置大图
		banner.setAttribute('src',path);
	}
	
	var timer = setInterval(run,1000);
	
	for(var k=0;k<small.length;k++){
		small[k].index = k;
		small[k].onmouseover = function(){
			// 清除循环定时器
			clearInterval(timer);
			// console.log(this.index)
			i = this.index-1;
			run();
		}
		
		small[k].onmouseout = function(){
			// 清除循环定时器
			timer = setInterval(run,1000);
		}
	}
</script>