jQuery_jquery를 기반으로 한 왼쪽 및 오른쪽 스크롤 구현 코드

두 개의 div.
div는 너비가 고정되어 있습니다. 보조 div에 div를 삽입합니다. 이것이 데이터 열입니다.

코드 복사 코드는 다음과 같습니다.

• data2



• 데이터2


• 데이터2

ul>

오른쪽으로 이동
스타일 시트
.box{
float: 왼쪽
높이: 93px
너비: 560px; nowrap;
overflow:hidden;
position:relative /* 보조 속성을 추가하지 않으면 콘텐츠를 숨길 수 없습니다*/
}
.box-li{
float: left; >height: 90px;
왼쪽:0px;
white-space:nowrap;
clear: 모두
} .box-li ul{
width:100000px; /* IE의 데이터는 시간 데이터를 추가하지 않고 자동으로 래핑됩니다.*/
white-space:nowrap;
}
.box-li li{
margin-left:0px ;
여백-오른쪽:0px;
float: 왼쪽;
text-align:center
너비:
}
$(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); //왼쪽 값을 변경하고 디스플레이 레이아웃을 전환합니다
$cur--; //레이아웃이 감소합니다
}
}
} );
//뒤로 스크롤
$next.click(function () {
if (!$showbox.is(':animated')) { //표시 영역이 애니메이션인지 확인
if ($cur == $pagecount) { //마지막 페이지에서 뒤로 스크롤해도 아무런 동작이 없습니다.}
else {
$showbox.animate({
left: '-=' $w
}, 600); //왼쪽 값을 변경하고 디스플레이 레이아웃을 전환합니다
$cur; //레이아웃 개수가 누적됩니다
}
}); })

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.