SOURCE

var box  = document.getElementById('box');
          var prev = document.getElementById('prev');
          var next = document.getElementById('next');
          var img  = document.getElementById('img');
          var list = document.getElementById('list');
          var lili = list.getElementsByTagName('li');
          var a   = 0;
          var pic = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg']
          var str = '';
          var oP  = document.getElementsByTagName('p');//tagname,classname是动态。。其他为静态
      
          

          //第三步；生成下方页码。注意下方页码起始有默认显示样式
          for(var i=0;i<pic.length;i++){     //3
               str +='<li></li>'     
          }
          list.innerHTML = str;
          lili[0].className='active';        //3

          //第六步，点击下方页码切换图片
           for(var i =0;i<pic.length;i++){   //6

               lili[i].a=i;                  //6
               lili[i].onclick=function(){   //6
                  for(var i=0;i<pic.length;i++){  //6
                    
                    lili[i].className='';    //6
                  }
                  this.className='active';   //6
                  img.src='img/'+pic[this.a];     //6
                  //第七部，处理图片同步
                  a = this.a;                //7
               }
           
           }
      	 //第八步，生成缩略区域。鼠标滑过显示缩略图
           for(var i=0; i<pic.length;i++){
           			lili[i].innerHTML += '<p><img src=img/'+pic[i]+'/></p>'
           	}
         //第九步。鼠标滑过事件
         		for(var i=0;i<pic.length;i++){
         				 lili[i].index=i;
          			 lili[i].onmouseover=function(){
									oP[this.index].style.display='block';	
//										console.log(oP);
								}
          			  lili[i].onmouseout=function(){
									oP[this.index].style.display='none';	
//										console.log(oP);
								}
         }
           //第一步；制作左右轮播之切换下一个
          next.onclick=function(){
                    //第五步清空上次，页码留下的颜色变化
                    lili[a].className='';    //5
                    a++;                     //1
                    if(a>=pic.length){       
                    a=0;                                              
                    }
                    img.src='img/'+pic[a];   //1
                    //第四部；页码切换随IMG变换
                    lili[a].className='active';
          };
          //第二步；制作左右轮播之切换上一个
          prev.onclick=function(){
                    //第五步清空上次，页码留下的颜色变化
                    lili[a].className='';   //5
                    a--;
                    if(a<=0){
                    a=pic.length-1;
                    }
                    img.src='img/'+pic[a];
                    //第四步；页码切换随IMG变换
                    lili[a].className='active';
          };

<div id="box">
          <a herf="javascript:;" id="next"> > </a>
          <a herf="javascript:;" id="prev"> < </a>
          <img src="img/1.jpg" id="img"/>
          <ul id="list">
      <!--<li class="active">1<p></p></li>
          <li>1<p></p></li>
          <li>3<p></p></li>
          <li>4<p></p></li>
          <li>5<p></p></li>
          <li>6<p></p></li> -->
          </ul>

*{padding:0;margin:0;list-style:none;}
          #box{width:500px;height:500px;margin:100px auto;border:1px solid red;position:relative;}
          #img{width:500px; height:500px;}         
          a{display:block;width:50px;height:50px;position:absolute;background:#fff;opacity:0.5;font-size:50px;text-align:center;margin:auto 0;top:0;bottom:0;}
          #next{right:10px;}
          #prev{left:10px;}
          #list{width:100%;height:20px;position:absolute;bottom:50px;text-align:center;}
          #list li{width:20px;height:20px;background:red;border-radius:50px;display:inline-block;position: relative;}
          #list .active{background:yellow;}
          #list li p{width:100px;height: 100px;display: block;position: absolute;top: -120px;left: -40px;background: yellow;display: none;}
           #list li p img{width: 100px; height:100px;}