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>