JS部分你要取出你的轮播图个数，然后定义一个切换到单前的变量，再定义切换效果，切到最后一张图片了要如何处理，切换都第一张用户点击上一站又要如何处理。当你这些都处理好了之后，一个页面多个轮播等等，JS兼容页面兼容又得处理吧，我就问你头痛不。
现在使用框架这些通通都不用自己管，高效轻松他不好吗？
网页设计中让图片轮播，需要用到的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)
}
这样是能实现轮播的。
