网页设计中如何让图片轮播(网页设计广告,关键词优化)

网页设计中让图片轮播，需要用到的JS和比较好的div+css布局意识，主要还是需要了解left，top在css中的意思，这里我提交一段我以前写的代码； html中的代码：<div id="box"> <div id="woZaiHouDun" class='hide' > <a id="btnLeft" href='javascript:void(0);'> </a> <a id="btnRight" href='javascript:void(0);'> </a> <ul> <li><img width="400" height="260" src="./images/scholl/1.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/2.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/3.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/1.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/2.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/3.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/1.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/2.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/3.jpg"/></li> </ul> </div>js中的代码：ar t=null;function woZaiHouDun(){ var oUl = document.getElementById('woZaiHouDun').getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); oUl.innerHTML += oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px'; var oBtnLeft = document.getElementById('btnLeft'); var oBtnRight = document.getElementById('btnRight'); var iTarget = 0; var ispeed = -3; oBtnLeft.onclick = function(){ ispeed = 3; } oBtnRight.onclick = function(){ ispeed = -3; } t=setInterval(function(){ iTarget = oUl.offsetLeft -ispeed; if( iTarget < - oUl.offsetWidth/2){ oUl.style.left =0 +'px'; iTarget = oUl.offsetLeft -ispeed; } if( iTarget > 0){ oUl.style.left =- oUl.offsetWidth/2 +'px'; iTarget = oUl.offsetLeft -ispeed; } oUl.style.left =iTarget +'px'; },30)}这样是能实现轮播的。