首页 > 代码库 > 图片自换（数字）
图片自换（数字）
js代码：
i=0
function img()
{
i++
if(i==7)
{
i=1
}
document.getElementById(‘photo‘).src="http://www.mamicode.com/images/"+i+".jpg";
setTimeout("img()",2000)
}
function onClickNum(i)
{
document.getElementById(‘photo‘).src="http://www.mamicode.com/images/"+i+".jpg";
}
var n=0;
function shuzi()
{
n++;
if(n==7) n=1;
for(var j=1;j<7;j++)
{
if(n==j)
document.getElementById("num").getElementsByTagName("li")[n-1].className="on";
else
document.getElementById("num").getElementsByTagName("li")[j-1].className="";
}
setTimeout("shuzi()",2000)
}
CSS代码：
#main-left {
height: 400px;
width: 750px;
}
#main-left img {
width:750px;
height:400px;
}
#num{
width: 160px;
height: 30px;
position: relative;
top: -30px;
left: 580px;
}
#num li{
list-style:none;
width:22px;
height:20px;
line-height:20px;
text-align:center;
float:left;
border:1px #3399FF solid;
color:#39F;
margin-right:2px;
}
#num li a{
display:block;
text-decoration:none;
font-weight:bold;
}
#num li.on{
color:#F90;
width:22px;
border:#F90 solid 1px;
height:24px;
text-decoration:none;
background-color:#F90;}
span{
margin-right:5px;}
HTML代码：
1.<body onl oad="img();shuzi()" style="overflow-y:visible;overflow-x:hidden">
2.<div id="main-left">
<img id="photo" src="http://www.mamicode.com/images/4.jpg" border="0">
<div id="num">
<ul>
<li><a href="http://www.mamicode.com/#" onm ousemove="onClickNum(1)"><span>1</span></a></li>
<li><a href="http://www.mamicode.com/#" onm ousemove="onClickNum(2)"><span>2</span></a></li>
<li><a href="http://www.mamicode.com/#" onm ousemove="onClickNum(3)"><span>3</span></a></li>
<li><a href="http://www.mamicode.com/#" onm ousemove="onClickNum(4)"><span>4</span></a></li>
<li><a href="http://www.mamicode.com/#" onm ousemove="onClickNum(5)"><span>5</span></a></li>
<li><a href="http://www.mamicode.com/#" onm ousemove="onClickNum(6)"><span>6</span></a></li>
</ul>
</div>
</div>
图片自换（数字）