jQuery를 이용하여 제품 진열 사진의 좌우 스크롤 기능을 간단하게 구현(샘플코드)_jquery

최근 한 화면에 다 담을 수 없는 상품이 많아서 클릭하면 페이지가 넘어가는 효과를 만들고 싶었는데, 몇 개는 안 됐어요. 잘 안 되서 결국 제가 직접 작성하게 됐어요.

효과는 다음과 같습니다.



원리는 비교적 간단합니다. 면적 스크롤되도록 CSS의 재정의를 숨김으로 설정하고 너비를 4000px과 같이 비교적 큰 값으로 설정한 다음 이전 페이지 또는 다음 페이지의 버튼을 클릭할 때마다 현재 페이지 번호를 계산합니다. 마지막 페이지에 도달한 경우 첫 번째 페이지에서 두 개의 div가 필요한 div의 왼쪽 속성을 제어하여 스크롤을 수행하고 내부 DIV의 위치를 ​​설정합니다. 절대값으로 설정되어 있습니다.

주요 코드는 다음과 같습니다.

HTML:

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

화살표제품 디스플레이

스팬>

데이터 수집 모바일 단말기

< ; img/>

데이터 수집 모바일 단말기

데이터 수집 모바일 단말기

🎜>

데이터 수집 모바일 단말기

>

데이터 수집 모바일 터미널 1

>

데이터 수집 모바일 단말기1

데이터 수집 모바일 단말기1

< ;span class="next">

CSS:

code 코드는 다음과 같습니다: #product {

width:720px;

height:200px;
border:1px solid # ccc;
여백:0 5px 5px 0;
float:left;
}
#product div#content {
위치:상대적;
너비:690px;
높이 :160px ;
디스플레이:inline-block;
오버플로:hidden;
float:left;
}
#product div#content_list {
위치:절대;
너비 :4000px ;
}
#product dl{
너비:160px;
높이:150px;
float:left;
여백:10px 4px;
패딩:2px 2px ;
}
#product dl:hover {
테두리:1px 단색 #333;
배경:#ccc;
}
#product dl dt {

}
#product dl dt img {
너비:160px;
높이:120px;
테두리: 없음;
}
#product dl dd {
text-align: center;
}
#productspan.prev{
커서:포인터;
디스플레이:inline-block;
너비:15px;
높이:150px;
배경: url( ../images/arrow_l.gif) 반복 없음 왼쪽 중앙;
float:left;
}
#productspan.next{
커서:포인터;
디스플레이:인라인 -block ;
너비:15px;
높이:150px;
배경:url(../images/arrow_r.gif) 반복 없음 왼쪽 가운데;
float:right;
}


js 코드

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

$(function(){
var page = 1;
var i = 4; //각 페이지에 4개의 그림 배치
//뒤로 버튼
$("span .next").click(function(){ //클릭 이벤트 바인딩
var content = $("div#content");
var content_list = $("div#content_list");
var v_width = content.width();
var len = content.find("dl").length;
var page_count = Math.ceil(len / i); //정수가 아닌 한 , 큰 방향에서 가장 작은 정수 가져오기
if( !content_list.is(":animated") ){ //"콘텐츠 표시 영역"이 애니메이션화되는지 확인
if( page == page_count ){ // 이미 마지막 페이지에 도달했습니다. 다시 돌아가면 첫 번째 페이지로 이동해야 합니다.
content_list.animate({ left : '0px'}, "slow"); 왼쪽 값을 변경하여 왼쪽 페이지
page = 1;
}else{
content_list.animate({ left : '-=' v_width }, "slow"); 왼쪽 값에 따라 각 변경이 이루어집니다. 레이아웃
페이지 ;
}
}
});
//앞으로 버튼
$("span.prev").click( function(){
var content = $("div#content");
var content_list = $("div#content_list");
var v_width = content.width();
var len = content.find(" dl").length;
var page_count = Math.ceil(len / i) ; //정수가 아닌 이상 큰 방향으로 가장 작은 정수를 취합니다
if(!content_list.is(":animated" ) ){ //"콘텐츠 표시 영역"이 애니메이션에 있는지 확인
if(page == 1){ //첫 번째 페이지에 도달했습니다. 앞으로 이동하려면 마지막 페이지로 이동해야 합니다.
content_list.animate({ left : '-=' v_width*(page_count-1) }, "slow");
page = page_count;
}else{
content_list.animate({ left : ' =' v_width }, "느림");
페이지--;
}
}
});
});