Two divs.
A div is fixed in width. Embed a div in the sub-div, which is a data column.
Copy codeThe Code is as follows:
<Div class = "box">
<Div class = "box-li">
<Ul>
<Li> data 2 </li>
<Li> data 2 </li>
<Li> data 2 </li>
<Li> data 2 </li>
<Li> data 2 </li>
<Li> data 2 </li>
<Ul>
</Div>
<Div>
<Span id = "next"> move to the right </span>
<Span id = "pre"> move to left </span>
Style Sheet
. Box {
Float: left;
Height: 93px;
Width: 560px;
Left: 0px;
White-space: nowrap;
Overflow: hidden;
Position: relative/* The unadded attribute cannot hide content in ie7 */
}
. Box-li {
Float: left;
Height: 90px;
Left: 0px;
Position: relative;
White-space: nowrap;
Clear: both;
}
. Box-li ul {
Width: 100000px;/* Data in IE will automatically wrap when no data is added */
White-space: nowrap;
}
. Box-li {
Margin-left: 0px;
Margin-right: 0px;
Float: left;
Text-align: center;
Width: 92px;
}
$ (Function (){
Var $ cur = 1; // initialize the displayed layout
Var $ I = 6; // Number of displays per version
Var $ len = $ ('. box-li> ul> li'). length; // calculate the total length of the list (Quantity)
Var $ pagecount = Math. ceil ($ len/$ I); // calculates the number of display pages.
Var $ showbox = $ ('. box ');
Var $ w = $ ('. box'). width (); // obtain the peripheral width of the display area.
Var $ pre = $ ('# pre ');
Var $ next = $ ('# next ');
// Scroll forward
$ Pre. click (function (){
If (! $ Showbox. is (': animated') {// determines whether the display area is animated.
If ($ cur = 1) {// scroll forward without action in the first layout}
Else {
$ Showbox. animate ({
Left: '+ =' + $ w
}, 600); // change the left value and switch the display Layout
$ Cur --; // layout reduction
}
}
});
// Scroll backward
$ Next. click (function (){
If (! $ Showbox. is (': animated') {// determines whether the display area is animated.
If ($ cur = $ pagecount) {// scroll backward for no action in the last layout}
Else {
$ Showbox. animate ({
Left: '-=' + $ w
}, 600); // change the left value and switch the display Layout
$ Cur ++; // the total number of pages
}
}
});
});