Implementation code _jquery of the left and right scrolling based on jquery

Two Div.
A div is a fixed width. A div is embedded in the secondary Div, which is a data column.

Copy Code code 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 right </span>
<span id= "Pre" > Move left </span>
Style sheet
. box{
Float:left;
height:93px;
width:560px;
left:0px;
White-space:nowrap;
Overflow:hidden;
Position:relative/* No additional attributes can not hide content in IE7.
}
. box-li{
Float:left;
height:90px;
left:0px;
position:relative;
White-space:nowrap;
Clear:both;
}
. Box-li ul{
width:100000px; /* Do not add data in IE data will be automatically wrapped.
White-space:nowrap;
}
. Box-li 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; Display number per edition
var $len = $ ('. Box-li>ul>li '). length; Calculate total length of list (number)
var $pagecount = Math.ceil ($len/$i); Calculate the number of display suites
var $showbox = $ ('. box ');
var $w = $ ('. Box '). width (); Get the perimeter width of the display area
var $pre = $ (' #pre ');
var $next = $ (' #next ');
Roll forward
$pre. Click (function () {
if (! $showbox. Is (': Animated ')) {//Determine whether the display area is animated
if ($cur = = 1) {//In the first layout, then scroll forward without action}
else {
$showbox. Animate ({
Left: ' + = ' + $w
}, 600); Change left value, toggle display layout
$cur--; Page tired
}
}
});
Scroll Backward
$next. Click (function () {
if (! $showbox. Is (': Animated ')) {//Determine whether the display area is animated
if ($cur = = $pagecount) {//In the last layout, scroll back without action}
else {
$showbox. Animate ({
Left: ' = ' + $w
}, 600); Change left value, toggle display layout
$cur + +; Add number of pages
}
}
});
});