这是一个js写的滚动轮播图，带有焦点，
未解决的bug：跳跃选择页数的时候，图片不能立即滚动过去而是需要一张一张滚动
贴一下代码；
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>轮播图</title> <style> *{ margin:0; padding:0; } li{ list-style:none; } #screen{ 400px; height:250px; border:5pxsolidred; position:absolute; top:100px; left:50px; overflow:hidden; } #screenul{ 1000%; position:absolute; } #screenli{ float:left; } #screenimg{ 400px; height:250px; } #arrspan{ 40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1pxsolid#fff; } #arr{ display:none; } #arr#right{ right:5px; left:auto; } ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center; } olli{ float:left; 20px; height:20px; background:#fff; border:1pxsolid#ccc; margin-left:10px; cursor:pointer; } olli.current{ background:#DB192A; } </style> </head> <body> <divid="screen"> <ul> <li><imgsrc="../images/11.jpg"alt=""></li> <li><imgsrc="../images/12.jpg"alt=""></li> <li><imgsrc="../images/13.jpg"alt=""></li> <li><imgsrc="../images/14.jpg"alt=""></li> <li><imgsrc="../images/15.jpg"alt=""></li> </ul> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <divid="arr"> <spanid="left"><</span> <spanid="right">></span> </div> </div> </body><script> //获取盒子 varscreen=document.getElementById("screen"); //获取ul varulObj=screen.children[0]; //获取li varlist=ulObj.children; //获取图片的宽度 varlistWidth=list[0].offsetWidth; //获取焦点 vararrObj=document.getElementById("arr"); //获取ol varolObj=screen.children[1]; varindex=0; //鼠标进入时显示小标签背景色 for(vari=0;i<olObj.children.length;i++){ //给每一个小标签设置索引 olObj.children[i].setAttribute("index",i); olObj.children[i].onmouseover=function(){ //先清理背景色 for(varj=0;j<olObj.length;j++){ olObj.children[j].className=""; } this.className="current"; //获取索引值 varindex=this.getAttribute("index"); animation(ulObj,-index*listWidth); }; olObj.children[i].onmouseout=function(){ this.className=""; } } //克隆第一张图片 ulObj.appendChild(ulObj.children[0].cloneNode(true)); //自动播放 vartimeId=setInterval(clickHandle,1000); //设置鼠标进入显示焦点 screen.onmouseover=function(){ arrObj.style.display="block"; clearInterval(timeId); } screen.onmouseout=function(){ arrObj.style.display="none"; timeId=setInterval(clickHandle,1000); } //左焦点 document.getElementById("left").onclick=function(){ if(index==0){ index=list.length-1; ulObj.style.left=-index*listWidth+"px"; } index--; animation(ulObj,-index*listWidth); } //右焦点 document.getElementById("right").onclick=clickHandle(); functionclickHandle(){ if(index==list.length-1){ index=0; ulObj.style.left="0px"; } index++; animation(ulObj,-index*listWidth); } /* *设置动画函数 *@paramelement,对象 *@paramtarget,移动到的目标位置 **/ functionanimation(element,target){ //先清理定时器 clearInterval(element.timeid); element.timeid=setInterval(function(){ //获取元素当前位置 varcurrent=element.offsetLeft; //每次移动的步数 varstep=10; step=current<target?step:-step; current+=step; if(Math.abs(target-current)<Math.abs(step)){ clearInterval(element.timeid); //直接到达target element.style.left=target+"px"; }else{ element.style.left=current+"px"; } },20); } </script> </html>