完美实现js焦点轮播效果(二)（图片可滚动）

*{

 margin: 0;

 padding: 0;

 list-style: none;

 text-decoration: none;

}

 .wrap{

 width: 490px;

 height: 170px;

 margin: 100px auto;

 border: 1px solid #000000;

 position: relative;

 overflow: hidden;

 }

 #pic{

 width: 2450px;

 height: 170px;

 }

 #pic li{

 float: left;

 }

 #list{

 position: absolute;

 bottom: 10px;

 left:150px ;

 }

 #list li{

 float: left;

 width: 15px;

 height: 15px;

 background: #fff;

 margin: 0 10px;

 border-radius: 50%;

 cursor: pointer;

 }

 #list .on{

 background: #e27a00;

 }

 .Prev{

 top: 30px;

 left: 0;

 }

 .Next{

 top: 30px;

 right: 0;

 }

 .Prev,.Next{

 position: absolute;

 font-size: 80px;

 font-weight: bold;

 color:#fff ;

 -webkit-transition: all 0.35s ease-in-out

 }

 .Next:hover,

 .Prev:hover{

 background: #ccc;

 background: rgba(204, 204, 204, 0.4);

 }

 .show{

 display: block;

 }

 .hidden{

 display: none;

 }

 window.onload=function(){

 var pic=document.getElementById('pic').getElementsByTagName('li');

 var list=document.getElementById('list').getElementsByTagName('li');

 var prev=document.getElementById('Prev');

 var next=document.getElementById('Next');

 var index=0;

 var timer=null;

 auto();

 for(var i=0;i

 list[i].index=i;

 list[i].onmouseover=function(){

  clearInterval(timer);

  Change(this.index);

 }

 list[i].onmouseout=function(){

  auto();

 }

 pic[i].onmouseover=function(){

  clearInterval(timer);

 }

 pic[i].onmouseout=function(){

  auto();

 }

 }

 prev.onclick=function(){

 clearInterval(timer);

 index--;

 if(index<=0){

  index=list.length-1;

 }

 Change(index);

 }

 next.onclick=function(){

 clearInterval(timer);

 index++;

 if(index>=list.length){

  index=0;

 }

 Change(index);

 }

 prev.onmousemove=function(){

 clearInterval(timer);

 }

 prev.onmouseout=function(){

 auto();

 }

 next.onmouseover=function(){

 clearInterval(timer);

 }

 next.onmouseout=function(){

 auto();

 }

 function Change(curIndex){

  for(var i=0;i

  list[i].className="";

  pic[i].className="hidden";

  }

  list[curIndex].className="on";

  pic[curIndex].className="show";

 index=curIndex;

 }

 function auto(){

 timer=setInterval(function(){

  index++;

  if(index>=list.length){

  index=0

  }

  Change(index);

 },2000);

 }

 }

 <

 >