사진 그룹을 클릭한 후 왼쪽과 오른쪽으로 슬라이드하는 jQuery 구현 코드_jquery

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

$(function () {
var page = 1;/ /페이지 변수 초기화
var i = 2;//각 페이지에 두 세트의 그림 배치
var $pictureShow = $(".pictures4")
var downwidth = $pictureShow.width ();// 프레임 내용의 너비, 즉 각 이동의 크기를 가져옵니다
var len = $(".picturescontent4").find('ul').length;//그룹 수 찾기 총 사진 수
var page_number = Math .ceil(len / i);//총 레이아웃 수 찾기
$("#symbol4b").click(function () {
if (!$(".picturescontent4").is(" :animated")) {//애니메이션 효과 실행 여부 확인
if (page == page_number) {//마지막 페이지에 도달했습니다. . 다시 돌아가면 첫 번째 페이지로 이동해야 합니다.
$(".picturescontent4").animate({ left: '0px' }, "slow");// left value
page = 1;
} else {
$(".picturescontent4").animate({ left: '-=' downwidth }, "slow");//왼쪽 값 변경 , 매번 한 페이지씩 변경 가능
}
}
return false
})
$("#symbol4a").click(function () {
if (!$(".picturescontent4").is( ":animated")) {
if (page == 1) {//첫 번째 페이지에 도달했습니다. 마지막 페이지로 이동
$(".picturescontent4") .animate({ left: '-=' downwidth * (page_number - 1) }, "slow");//왼쪽을 변경하여 마지막 페이지로 이동 value
page = page_number;
} else {
$(".picturescontent4").animate({ left: ' =' downwidth }, "slow");//왼쪽 값을 변경하여 페이지는 매번 변경될 수 있습니다.
}
}
return false
})

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

;div class="picturescontent4">

• 
  






• 
  
  
;

• 
  
  






• 
  
  


• 
  
  
/ul>



• 
  img class="picture" src="i/ 그림 9.png" alt="그림 9"/>
  

> ;




="commona" href="#"> ;
🎜>
• 
  < ;/a>
  

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

.pictures2ul1,.pictures2ul2,.pictures2ul3, .pictures2ul4, .pictures2ul5,.pictures2ul6
{
여백: 0px;
여백: 17px;
너비: 122px; ;
목록 스타일 유형:없음;}
.pictures4
{
높이:111px;
위치:절대값
폭:278px;
}
.picturescontent4 //위치 설정 후 자바스크립트에서 왼쪽 컨트롤을 사용할 수 있습니다.
{
위치:절대;
float:왼쪽
너비:834px
}