网页设计中让图片轮播,需要用到的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)
}
这样是能实现轮播的。
取消
评论