<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> ????? </Title>
<Script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"> </script>
<Style type = "text/css">
Body, ul, li {padding: 0; margin: 0}
Ul, li {list-style: none}
. Img-scroll {position: relative; margin: 20px auto; width: pixel PX ;}
. Img-scroll. prev,. img-scroll. next {position: absolute; display: block; width: 50px; height: 100px; background-color: #000;
Top: 0; color: # FFF; text-align: center; line-height: 100px}
. Img-scroll. prev {left: 0}
. Img-scroll. next {right: 0}
. Img-list {position: relative; width: 320px; height: 100px; margin-left: 60px; overflow: hidden}
. Img-list ul {width: 9999px ;}
. Img-list li {float: left; display: inline; width: 100px; margin-right: 10px; height: 100px; background-color: # BDBDDF; text-align: center; line-height: 100px ;}
</Style>
</Head>
<Body>
<Div class = "img-scroll">
<Span class = "prev"> prev </span>
<Span class = "next"> next </span>
<Div class = "img-list">
<Ul>
<Li> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li> 4 </li>
</Ul>
</Div>
</Div>
<Script type = "text/javascript">
Function DY_scroll (wraper, prev, next, img, speed, or)
{
Var wraper = $ (wraper );
Var prev = $ (prev );
Var next = $ (next );
Var img = $ (img). find ('ul ');
Var w = img. find ('lil'). outerWidth (true );
Var s = speed;
Next. click (function ()
{
Img. animate ({'margin-left':-w}, function ()
{
Img. find ('lil'). eq (0). appendTo (img );
Img.css ({'margin-left': 0 });
});
});
Prev. click (function ()
{
Img. find ('li: la'). prependTo (img );
Img.css ({'margin-left':-w });
Img. animate ({'margin-left': 0 });
});
If (or = true)
{
Ad = setInterval (function () {next. click () ;}, s * 1000 );
Wraper. hover (function () {clearInterval (ad) ;}, function () {ad = setInterval (function () {next. click () ;}, s * 1000 );});
}
}
DY_scroll ('. img-scroll', '. prev','. next', '. img-list', 3, false );
</Script>
</Body>
</Html>