Image self-replacement (image)

Js code:

I = 16/* the name of the image is a number, starting from 17 */
Function img ()
{
I ++
If (I = 23 ){
I = 17
}
Document. getElementById ('photo'). src = "images/" + I + ". jpg";/* note the format of the image */
SetTimeout ("img ()", 6000)
}

Function onClickNum (I)
{  

Document. getElementById ('photo '). src = "images/" + I + ". jpg"; note: images and HTML documents must be in the same root directory.

}

CSS code:  

# 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);/* implement transparency in IE */
-Moz-opacity: 0.5;/* transparent in Firefox */
}

# Num li {
Float: left;
Width: 125px;
Height: 49px;
Line-height: 58px;
List-style: none;
Margin-top: 6px;
Margin-right: 37px;
}
# Num li {
Display: block;/* block element */
Opacity: 0.7;
}
# Num li a: hover {
Border: 3px solid # 39F;/* border */
Opacity: 1;
}

HTML code:

<Div id = "shang">

<Div id = "num">
<Ul>
<Li> <a href = "#" onmouseover = "onClickNum (17)"> </a> </li>
<Li> <a href = "#" onmouseover = "onClickNum (18)"> </a> </li>
<Li> <a href = "#" onmouseover = "onClickNum (19)"> </a> </li>
<Li> <a href = "#" onmouseover = "onClickNum (20)"> </a> </li>
<Li> <a href = "#" onmouseover = "onClickNum (21)"> </a> </li>
<Li> <a href = "#" onmouseover = "onClickNum (22)"> </a> </li>
</Ul>
</Div>
</Div>

 

Image self-replacement (image)