轮播图代码,html里30张多图片轮播代码
<html>
<head>
<title>图片滚动 </title>
<style>
#div1 {position:relative;width:650px;height:210px;overflow:hidden; }
#div2{position:absolute;}
li{float:left;list-style-type:none;padding:5px;}
img{border:none;}
a{position:relative;}
</style>
<script>
window.onload=function()
{
var odiv2=document.getElementById(/’div2/’);
var ali=odiv2.getElementsByTagName(/’li/’);
var aspeed=-5;
odiv2.innerHTML+=odiv2.innerHTML;
odiv2.style.width=ali[0].offsetWidth*ali.length+/’px/’;
setInterval(function()
{
odiv2.style.left=odiv2.offsetLeft+aspeed+/’px/’;
if (odiv2.offsetLeft<-odiv2.offsetWidth/2)
{
odiv2.style.left=/’0px/’;
}
},30);};
}
</script>
</head>
<body>
<div id=/’div1/’>
<div id=/’div2/’>
<li><a href=/”/”><img src=/”1.jpg/” /></a></li>
<li><a href=/”/”><img src=/”2.jpg/” /></a></li>
<li><a href=/”/”><img src=/”3.jpg/” /></a></li>
<li><a href=/”/”><img src=/”4.jpg/” /></a></li>
<!–这边你可以添加任意多的li轮播图代码，也就是你可以添加任意多的图片，使任意多的图片轮播–>
</div>
</div>
</body>
</html>
