首页 > 代码库 > 鼠标单击切换图片
鼠标单击切换图片
<style>
body{background:#000000;text-align:center;}
h1{margin:40px;color:#FFFFFF;font-weight:bold;}
hr{color:#FFFFFF;margin:20px;}
#Bos{width:500px;height:200px;margin:100px auto;}
</style>
<script>
window.onload=function()
{
var curIndex=0;
var arr=new Array();
arr[0]="img_1.jpg";
arr[1]="img_2.jpg";
arr[2]="img_3.jpg";
var img=document.getElementById(‘img‘);
img.onclick=function(){
if(curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
img.src=http://www.mamicode.com/arr[curIndex];
}
}
</script>
<body>
<h1>图片自动切换</h1>
<hr />
<div id="Bos">
<img src="http://www.mamicode.com/img_1.jpg" id="img" style="width:500px;height:200px;"/>
</div>
</body>
鼠标单击切换图片