Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta content = "text/html; charset = UTF-8"/>
<Title> Jquery effects on left-right interval scrolling of images </title>
<Style type = "text/css">
* {Margin: 0px; padding: 0px; font-size: 12px ;}
A {text-decoration: none; font-size: 12px ;}
A: link {color: #383455; font-size: 12px ;}
A: hover {color: # ff0000; font-size: 12px ;}
A: visited {color: #383455; font-size: 12px ;}
Img {border: none ;}
. Hl_main5_content {width: 898px; height: 155px; border-top: none; margin-left: 1px; margin: 100px auto ;}
. Hl_main5_content1 {width: 838px; margin-top: 5px; overflow: hidden; float: left; margin-left: 15px ;}
. Hl_main5_content1 ul {width: 1600px; overflow: hidden ;}
. Hl_main5_content1 ul li {float: left; width: 200px; display: inline; border: 1px # FF0000 solid; margin-right: 10px ;}
. Hl_main5_content1 ul li img {width: 200px ;}
. Hl_scrool_leftbtn {width: 14px; height: 38px; background: # ccc url(hl_scroll_left.jpg) no-repeat; float: left; margin-top: 50px; cursor: pointer ;}
. Hl_scrool_rightbtn {width: 14px; height: 38px; background: # ccc url(hl_scroll_right.jpg) no-repeat; float: right; margin-top: 50px; cursor: pointer ;}
</Style>
</Head>
<Body>
<Div class = "hl_main5_content">
<Div class = "hl_scrool_leftbtn"> </div>
<Div class = "hl_scrool_rightbtn"> </div>
<Div class = "hl_main5_content1">
<Ul>
<Li> <a href = "" title = ""> </a> </li>
<Li> <a href = "" title = ""> </a> </li>
<Li> <a href = "" title = ""> </a> </li>
<Li> <a href = "" title = ""> </a> </li>
<Li> <a href = "" title = ""> </a> </li>
<Li> <a href = "" title = ""> </a> </li>
<Li> <a href = "" title = ""> </a> </li>
</Ul>
</Div>
</Div>
</Div>
<Script type = "text/javascript" src = "http://jt.875.cn/js/jquery.js"> </script>
<Script type = "text/javascript">
Var flag = "left ";
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 });
});
Flag = "left ";
});
Prev. click (function (){
Img. find ('li: la'). prependTo (img );
Img.css ({'margin-left':-w });
Img. animate ({'margin-left': 0 });
Flag = "right ";
});
If (or = true ){
Ad = setInterval (function () {flag = "left "? Next. click (): prev. click ()}, s * 1000 );
Wraper. hover (function () {clearInterval (ad) ;}, function () {ad = setInterval (function () {flag = "left "? Next. click (): prev. click ()}, s * 1000 );});
}
}
DY_scroll ('. hl_main5_content ','. hl_scrool_leftbtn ','. hl_scrool_rightbtn ','. hl_main5_content1 ', 3, true); // true indicates automatic playback. If this parameter is not added or false, automatic playback is disabled by default.
</Script>
<Div style = "margin: 0 auto; width: 950px;">
You can enable or disable automatic playback, and click the left and right arrows to play the video. It mainly modifies the parameters in DY_scroll (). The first parameter hl_main5_content is the class of the outermost div, followed by the left button and the right button, which contains the div of the image, time (the lower the speed, the faster the value), whether to play automatically. </Div>
</Body>
</Html>
As follows: