htmL中怎么使图片轮播,网页设计中怎么让图片轮播

网页设计中让图片轮播，需要用到的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

liimg width=400 height=260 src=./images/scholl/1.jpg//li

liimg width=400 height=260 src=./images/scholl/2.jpg//li

liimg width=400 height=260 src=./images/scholl/3.jpg//li

liimg width=400 height=260 src=./images/scholl/1.jpg//li

liimg width=400 height=260 src=./images/scholl/2.jpg//li

liimg width=400 height=260 src=./images/scholl/3.jpg//li

liimg width=400 height=260 src=./images/scholl/1.jpg//li

liimg width=400 height=260 src=./images/scholl/2.jpg//li

liimg 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)

}

这样是能实现轮播的。

取消

评论