您的位置：首页 > Web前端 > JavaScript

javascript图片轮换

2011-10-09 09:17 239 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>简单的图片轮换</title>
<style type="text/css">
*{
margin:0;
padding:0;
}

#banner{
position:relative;
width:954px;
height:198px;
margin:5px auto;
border:2px solid #f00;
}
#banner div{
position:absolute;
}
</style>

<script  type="text/javascript">
var minnum=1;//起始数
var maxnum=3;//结束数
var nownum=1;//当前数
function changepic(){
for(var i=minnum;i<=maxnum;i++){
if(nownum==i)
document.getElementById("mypic").src="images/banner_img"+i+".jpg";
}
nownum++;
if(nownum==(maxnum+1)){
nownum=1;
}
window.setTimeout(changepic,3000);
}

</script>
</head>

<body>
<ul>
<li id="banner">
<div>
<A href="#">
<img src="images/banner_img1.gif" id="mypic"/>
</A>
</div>
</li>
</ul>
</body>
</html>

这是一个简单的图片轮换代码.

给img设置了id,在javascript中通过document.getElementById("").src得到img的路径，进行修改。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航