Copy codeThe Code is as follows:
<! 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>
<Title> you can configure a scrolling Demo on the horizontal bar. </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Body {font-size: 12px ;}
</Style>
<Script src = "jquery-1.4.1.js" type = "text/javascript"> </script>
<Style type = "text/css">
# Scrollable {
Background-color: # efefef;
Border: 1px solid # ddd;
Padding: 10px 8px;
Width: 523px;
Height: 65px;
Margin-top: 30px;
}
Div. items {
Height: 66px;
Margin-left: 8px;
Float: left;
Width: 475px! Important;
}
Div. items {
Display: block;
Float: left;
Margin-right: 8px;
Width: 88px;
Height: 66px;
Background: # BBB;
Font-size: 50px;
Color: # ccc;
Line-height: 66px;
Text-decoration: none;
Text-align: center;
Cursor: pointer;
}
Div. items a: hover {
Color: #999;
}
Div. items a. active {
Background-position:-174px 0;
Color: #555;
Cursor: default;
}
A. prev, a. next {
Background: url(left.png) no-repeat 0 0;
Display: block;
Width: 18px;
Height: 18px;
Float: left;
Margin: 22px 0 0 0;
Cursor: pointer;
}
A. next {
Background-image: url(right.png)
}
A. prev: hover {
Background-position: 0-18px;
}
A. next: hover {
Background-position: 0-18px;
}
</Style>
<Script language = "javascript" type = "text/javascript">
(Function ($ ){
$. Fn. extend ({
Scroll: function (opt, callback ){
If (! Opt) var opt = {};
Var _ btnleft = $ (opt. left );
Var _ btnright = $ (opt. right );
Var timerID;
Var _ this = this. eq (0). find ("div"). eq (1 );
Var lineW = _ this. find ("a: first"). width (), // get the column width
Line = opt. line? ParseInt (opt. line, 10): parseInt (_ this. width ()/lineW, 10), // The number of columns to scroll each time. The default value is a screen, that is, the parent container column width.
Speed = opt. speed? ParseInt (opt. speed, 10): 500; // scroll speed. The greater the value, the slower the speed (in milliseconds)
Timer = opt. timer? ParseInt (opt. timer, 10): 3000; // interval of scrolling (MS)
If (line = 0) line = 1;
Var upWidth = 0-line * lineW;
// Scroll Function
Var scrollLeft = function (){
If (! _ This. is (": animated ")){
_ This. animate ({
Left: upWidth
}, Speed, function (){
For (I = 1; I <= line; I ++ ){
_ This. find ("a: first"). appendTo (_ this );
}
_This.css ({left: 0 });
});
}
}
Var scrollRight = function (){
If (! _ This. is (": animated ")){
For (I = 1; I <= line; I ++ ){
_ This. find ("a: last"). show (). prependTo (_ this );
}
_This.css ({left: upWidth });
_ This. animate ({
Left: 0
}, Speed, function (){
});
}
} // Shawphy: automatic playback
Var autoPlay = function (){
If (timer) timerID = window. setInterval (scrollLeft, timer );
};
Var autoStop = function (){
If (timer) window. clearInterval (timerID );
}; // Mouse event binding
_ This. hover (autoStop, autoPlay). mouseout ();
_Btnleft.css ("cursor", "pointer"). click (scrollLeft). hover (autoStop, autoPlay );
_Btnright.css ("cursor", "pointer"). click (scrollRight). hover (autoStop, autoPlay );
}
})
}) (JQuery );
$ (Document). ready (function (){
$ ("# Scrollable"). Scroll ({line: 5, speed: 500, timer: 3000, left: ". prev", right: ". next "});
});
</Script>
</Head>
<Body>
<Div style = "margin: 0 auto; width: 500px;">
<Div id = "scrollable">
<A class = "prev" href = "#"> </a>
<Div class = "items" style = "overflow: hidden; position: relative; visibility: visible; width: 478px;">
<Div style = "position: absolute; width: 200000em; left: 0px;" class = "scrollable_demo">
<A> 1 </a>
<A> 2 </a>
<A> 3 </a>
<A> 4 </a>
<A> 5 </a>
<A> 6 </a>
<A> 7 </a>
<A> 8 </a>
<A> 9 </a>
<A> 10 </a>
<A> 11 </a>
<A> 12 </a>
<A> 13 </a>
<A> 14 </a>
<A> 15 </a>
</Div>
<Br clear = "all"/>
</Div>
<A class = "next" href = "#"> </a>
</Div>
</Div>
</Body>
</Html>
Note: 1. Two images are required.
Left.png:
Right.png:
2. jquery package needs to be introduced. Needless to say, this is ......