Effect:
Code:
Copy codeThe Code is as follows:
<Head runat = "server">
<Title> </title>
<Style type = "text/css">
# Div1
{
Width: 245px;
Height: 150px;
Background: red;
Margin: 250px;
Margin-left: 500px;
Position: absolute;
Overflow: hidden;
}
# Div1 ul li
{
Float: left;
Width: 44px;
Height: 66px;
Margin-top: 20px;
Margin-right: 5px;
List-style: none;
}
# Div1 ul
{
Width: 250px;
Position: absolute;
Padding: 0;
}
</Style>
<Script type = "text/javascript">
Window. onload = function (){
Var oul = document. getElementsByTagName ('ul ') [0];
Var odiv = document. getElementById ('div1 ');
Var ali = document. getElementsByTagName ('lil ');
Oul. innerHTML = oul. innerHTML + oul. innerHTML;
Oul. style. width = (ali [0]. offsetWidth + 5) * ali. length + 'px ';
Function roll (){
If (oul. offsetLeft <=-oul. offsetWidth/2 ){
Oul. style. left = '0 ';
}
Oul. style. left = oul. offsetLeft-2 + 'px ';
}
Var timer = null;
Timer = setInterval (roll, 30 );
Odiv. onmouseover = function (){
ClearInterval (timer );
}
Odiv. onmouseout = function (){
Timer = setInterval (roll, 30 );
}
};
</Script>
</Head>
<Body>
<Div id = "div1">
<Ul>
<Li>
</li>
<Li>
</li>
<Li>
</li>
<Li>
</li>
<Li>
</li>
</Ul>
</Div>
</Body>