<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>轮播图-无缝滚动</title><style>body,ul,ol{margin:0;padding:0;}li{ list-style:none;}img{ border:none; vertical-align:top; }#box{width:470px;height:150px; position:relative; margin:30px auto; overflow:hidden;}ul{ width:470px; position:absolute;left:0; top:0; z-index:1;}ul li{width:470px;height: 270px }ol{z-index:2; width:120px; position:absolute;right:10px; bottom:10px;}ol li{ width:20px;height:20px; float:left;margin:0 2px; display:inline; background:#fff; color:#f60; line-height:20px; text-align:center;}ol .active{ background:#f60; color:#fff;}</style><script src="js/move.js"></script></head><body><div id="box"><ul><li style="display:block"><img src="images/1.jpg" alt=""/></li><li><img src="images/2.jpg" alt=""/></li><li><img src="images/3.jpg" alt=""/></li><li><img src="images/4.jpg" alt=""/></li><li><img src="images/5.jpg" alt=""/></li></ul><ol><li class="active">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol></div><script>var oBox=document.getElementById("box");var oUl = document.getElementsByTagName('ul')[0];var aLiUl = oUl.getElementsByTagName('li');var oOl = document.getElementsByTagName('ol')[0];var aLiOl = oOl.getElementsByTagName('li');var timer=null;var iNow=0;var iNow2=0;for(var i=0;i<aLiOl.length;i++){aLiOl[i].index=i;aLiOl[i].onmouseover=function(){console.log(1);if(iNow==0){aLiUl[0].style.position='static';oUl.style.top = 0;};for(var i=0;i<aLiOl.length;i++){aLiOl[i].className='';}this.index=iNow;this.className='active';startMove(oUl,{top:-this.index*270});}}timer=setInterval(run,1000);oUl.onmouseover=function(){clearInterval(timer)};oUl.onmouseout=function(){timer=setInterval(run,1000);};function run(){if(iNow==0){aLiUl[0].style.position='static';oUl.style.top = 0;iNow2=0;};if(iNow==aLiOl.length-1){iNow=0;aLiUl[0].style.position='relative';aLiUl[0].style.top=aLiUl.length*270 +'px'}else{iNow++;}iNow2++;for(var i=0;i<aLiOl.length;i++){aLiOl[i].className='';}aLiOl[iNow].className='active';startMove(oUl,{top:-iNow2*270});}</script></body></html>move.js
function startMove(obj,json,endFn){clearInterval(obj.timer);obj.timer = setInterval(function(){var bBtn = true;for(var attr in json){var iCur = 0;if(attr == 'opacity'){if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){iCur = Math.round(parseFloat(getStyle(obj,attr))*100);}else{iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;}}else{iCur = parseInt(getStyle(obj,attr)) || 0;}var iSpeed = (json[attr] - iCur)/8;iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);if(iCur!=json[attr]){bBtn = false;}if(attr == 'opacity'){obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';obj.style.opacity = (iCur + iSpeed)/100;}else{obj.style[attr] = iCur + iSpeed + 'px';}}if(bBtn){clearInterval(obj.timer);if(endFn){endFn.call(obj);}}},30);}function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];}}