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

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

WBOY

풀어 주다： 2016-05-16 17:05:53

원래의

1324명이 탐색했습니다.

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

효과는 다음과 같습니다.

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

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

HTML:

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

화살표제품 디스플레이

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

< ; img src="images/product2.jpg"/>: 데이터 수집 모바일 단말기

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

🎜>

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

: 데이터 수집 모바일 터미널 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 }, "느림");
 페이지--;
 }
 }
 });
});