首页 > 代码库 > 图片自换（图片）
图片自换（图片）
js代码：
i=16 /*图片要命名为数字，从17开始*/
function img()
{
i++
if(i==23){
i=17
}
document.getElementById(‘photo‘).src="http://www.mamicode.com/images/"+i+".jpg"; /*图片的格式要注意*/
setTimeout("img()",6000)
}
function onClickNum(i)
{
document.getElementById(‘photo‘).src="http://www.mamicode.com/images/"+i+".jpg"; 注：图片和HTML文档必须要在同一个根目录下。
}
CSS代码：
#shang {
height: 405px;
width: 100%;
}
#num {
height: 65px;
width: 980px;
position: relative;
top: -75px;
left: -1px;
background-color: #000;
opacity: 0.6;
filter:alpha(opacity=50); /*在IE中实现透明度*/
-moz-opacity:0.5; /*在火狐浏览器中实现半透明*/
}
#num li{
float: left;
width: 125px;
height: 49px;
line-height: 58px;
list-style: none;
margin-top: 6px;
margin-right: 37px;
}
#num li a{
display:block; /*块元素*/
opacity:0.7;
}
#num li a:hover{
border: 3px solid #39F; /*边框*/
opacity:1;
}
HTML代码：
<div id="shang">
<img src="http://www.mamicode.com/images/18.jpg" width="1000" height="400" id="photo" border="0">
<div id="num">
<ul>
<li><a href="http://www.mamicode.com/#" onm ouseover="onClickNum(17)"><img src="http://www.mamicode.com/jiudian/18.jpg" width="120" height="48" /></a></li>
<li><a href="http://www.mamicode.com/#" onm ouseover="onClickNum(18)"><img src="http://www.mamicode.com/jiudian/17.jpg" width="120" height="48" /></a></li>
<li><a href="http://www.mamicode.com/#" onm ouseover="onClickNum(19)"><img src="http://www.mamicode.com/jiudian/19.jpg" width="120" height="48" /></a></li>
<li><a href="http://www.mamicode.com/#" onm ouseover="onClickNum(20)"><img src="http://www.mamicode.com/jiudian/20.jpg" width="120" height="48" /></a></li>
<li><a href="http://www.mamicode.com/#" onm ouseover="onClickNum(21)"><img src="http://www.mamicode.com/jiudian/21.jpg" width="120" height="48" /></a></li>
<li><a href="http://www.mamicode.com/#" onm ouseover="onClickNum(22)"><img src="http://www.mamicode.com/jiudian/22.jpg" width="120" height="48" /></a></li>
</ul>
</div>
</div>
图片自换（图片）