jQuery 기반 좌우 스크롤 구현 코드

두 개의 div.하나의 div 는 고정 너비 입 니 다.다음 div 에 div 를 삽입 합 니 다.이것 은 데이터 열 입 니 다

 
<div class=”box”> 
<div class=”box-li”> 
<ul> 
<li>  2</li> 
<li>  2</li> 
<li>  2</li> 
<li>  2</li> 
<li>  2</li> 
<li>  2</li> 
<ul> 
</div> 
<div> 
<span id=”next”>    </span> 
<span id=”pre”>    </span> 
    
.box{ 
float: left; 
height: 93px; 
width: 560px; 
left:0px; 
white-space:nowrap; 
overflow:hidden; 
position:relative /*       ie7       */ 
} 
.box-li{ 
float: left; 
height: 90px; 
left:0px; 
position:relative; 
white-space:nowrap; 
clear: both; 
} 
.box-li ul{ 
width:100000px; /*      IE        */ 
white-space:nowrap; 
} 
.box-li li{ 
margin-left:0px; 
margin-right:0px; 
float: left; 
text-align:center; 
width: 92px; 
} 
$(function () { 
var $cur = 1; //         
var $i= 6; //      
var $len = $('.box-li>ul>li').length; //       (  ) 
var $pagecount = Math.ceil($len / $i); //         
var $showbox = $('.box'); 
var $w = $('.box').width(); //          
var $pre = $('#pre'); 
var $next = $('#next'); 
//     
$pre.click(function () { 
if (!$showbox.is(':animated')) { //          
if ($cur == 1) { //       ,         } 
else { 
$showbox.animate({ 
left: '+=' + $w 
}, 600); //  left ,       
$cur--; //     
} 
} 
}); 
//     
$next.click(function () { 
if (!$showbox.is(':animated')) { //          
if ($cur == $pagecount) { //        ,         } 
else { 
$showbox.animate({ 
left: '-=' + $w 
}, 600); //  left ,       
$cur++; //      
} 
} 
}); 
});