图片的水平滚动和上下滚动

来源：互联网发布：好的软件创意编辑：程序博客网时间：2024/04/30 23:41

这些天被图片的滚动效果搞的头都大了，唉·菜鸟就是菜鸟，不过现在还是有所收获的，至少知道了怎么做图片的水平滚动和上下滚动效果。

水平滚动效果实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

function setDiv()

{

imgdiv1.innerHTML+=imgdiv1.innerHTML;

setInterval(roll,30);

}

function roll()

{

window.status=imgdiv.scrollLeft;

if(imgdiv.scrollLeft>=606)

{

imgdiv.scrollLeft=0;

}

else

{

imgdiv.scrollLeft++

}

</script>

</head>

</div>

<td>

</tr>

</table>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>上下滚动示例</title>

function setDiv()

{

//document.getElementByID(imgdiv1).innerHTML=document.getElementByID(imgdiv).innerHTML;

imgdiv1.innerHTML=imgdiv.innerHTML;

}

function roll()

{

window.status=imgdiv1.offsetTop;

if(imgdiv1.offsetTop-bo.scrollTop<=0)

{

bo.scrollTop=0;

}

else

bo.scrollTop++;

}

var k=setInterval(roll,60);

function imgStop()

{

var c = clearInterval(k);

}

function imgStart()

{

k=setInterval(roll,60);

}

</script>

</head>

</div>

</div>

</body>

</html>