좌우 스크롤과 자동 스크롤 효과를 제어할 수 있는 jQuery 기반 코드_jquery

좌우스크롤 조절과 자동스크롤의 예를 공유합니다. 어젯밤에 모기 물림과 땀침입을 견디며 힘들게 얻은 코드를 한줄 한줄 쳐내며 보냈습니다. 두 종류의 모드를 캡슐화합니다:
클릭 스크롤 버전 DEMO 자동 스크롤 버전 DEMO, 소스 코드에 자세한 설명이 포함되어 있습니다. 아이디어:
클릭 스크롤 모드에서는 클릭(앞으로/앞으로(이후/숫자)), 클릭 이벤트를 추가하고 표시 블록의 왼쪽 값을 제어하여 전환합니다.
1. 앞으로(왼쪽): 첫 번째 페이지에 있을 때 마지막 페이지로 스크롤합니다. , 그렇지 않으면 왼쪽 값을 누적하고 앞으로 스크롤합니다.
2. 뒤로(오른쪽): 마지막 페이지에서 첫 번째 페이지로 스크롤하고, 그렇지 않으면 왼쪽 값을 줄이고 뒤로 스크롤합니다.
3. 디지털 클릭: 인덱스 사용(…) 숫자 목록에서 현재 클릭의 인덱스 값을 가져온 다음 인덱스 값은 주변 너비의 음수 값의 배수가 됩니다.
핵심 코드:

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

//@Mr.Think*** 앞으로 스크롤
$pre.click(function(){
if (!$showbox.is(':animated')) { //표시 영역에 애니메이션이 적용되는지 확인
if ($cur == 1) { //첫 번째 페이지에서 마지막 페이지로 스크롤합니다. Layout
$showbox.animate({
left: '-=' $w * ($pages - 1)
}, 500 ); //왼쪽 값 변경, 디스플레이 레이아웃 전환, 500(ms)은 스크롤 시간, 아래와 동일
$cur = $pages //레이아웃을 마지막 레이아웃으로 초기화
}
else {
$showbox.animate({
left: ' =' $ w
}, 500) //왼쪽 값을 변경하고 디스플레이 레이아웃을 전환합니다.
$cur--; 레이아웃이 축소됨
}
$num.eq($cur - 1).addClass ('numcur').siblings().removeClass('numcur') //해당 레이아웃 번호에 강조 스타일 추가; , 동일한 레벨 요소의 강조 스타일 제거
}
})
//@Mr.Think***뒤로 스크롤
$next.click(function(){
if (!$showbox.is(':animated')) { //표시 영역 판단 애니메이션 여부
if ($cur == $pages) { //마지막 페이지에 있을 때 첫 페이지까지 뒤로 스크롤 page
$showbox.animate({
left: 0
}, 500); //왼쪽 값 변경, 디스플레이 레이아웃 전환, 500(ms)은 스크롤 시간, 아래와 동일
$cur = 1; //첫 번째 레이아웃으로 초기화
}
else {
$showbox.animate({
left: '-=' $w
}, 500 );//왼쪽 값 변경 및 표시 레이아웃 전환
$cur; //레이아웃 개수가 누적됩니다
}
$num.eq($cur - 1).addClass('numcur' ).siblings().removeClass('numcur'); //해당 레이아웃 번호에 하이라이트 스타일을 추가하고 이동합니다. 형제 요소의 하이라이트 스타일 제외
}
}); Mr.Think***숫자클릭 이벤트
$num.click(function(){
if ( !$showbox.is(':animated')) { //표시 영역에 애니메이션이 적용되는지 확인
var $index = $num.index(this); //목록에서 현재 클릭의 위치 값을 인덱싱합니다.
$showbox.animate({
left: '-' ($w * $index)
}, 500); //왼쪽 값 변경, 디스플레이 레이아웃 전환, 500(ms)은 스크롤 시간입니다.
$ cur = $index 1; //이 문장은 클릭을 방지할 수 있습니다. 세 번째 페이지로 스크롤할 때 뒤로 버튼을 누르면 빈 페이지가 표시됩니다. index() 값은 0부터 시작하므로 1을 추가합니다.
$(this).addClass('numcur').siblings().removeClass(' numcur'); //현재 클릭에 강조 스타일을 추가하고 동일한 레벨 요소의 강조 스타일을 제거합니다
}
})


자동 스크롤 모드는 다음을 기반으로 향상됩니다. 클릭 스크롤 모드에서는 자동 스크롤 이벤트를 추가하고 마우스를 눌렀을 때 애니메이션 이벤트를 지우는 것뿐입니다.

여기서 한 가지 주목할 점은 앞으로/뒤로/숫자에 대한 클리어 애니메이션 이벤트가 추가된다는 것입니다. /area 그러나 페이지가 있는 경우 추가해야 할 이러한 클리어 애니메이션 이벤트는 모두 동일한 영역에 있으며 자동 스크롤을 시뮬레이션하기 위해 완전히 사용할 수 있습니다. 또 다른 점은 자동 스크롤이 setInterval(“fun”,interval) 대신 setTimeout(“fun”,interval)으로 구현된다는 점입니다. 그 이유는 setInterval은 간격 이후에 전달된 함수를 반복적으로 실행하는 반면, setTimeout은 해당 함수만 실행하기 때문입니다. 간격 후에 함수를 한 번 전달하여 마우스가 두 번째로 애니메이션 중지 영역으로 이동할 때 애니메이션이 지워지는 것을 방지합니다.
핵심 코드:

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

/ /@Mr.Think***자동스크롤 호출

autoSlide();
......
//@Mr.Think***스크롤 중지
clearFun($showbox)
clearFun($pre); ($next);
clearFun($num);
//@Mr.Think***이벤트가 그려질 때 자동 스크롤 중지
functionclearFun(elem){
elem.hover (function(){
clearAuto();
}, function(){
autoSlide();
})
}
//@Mr.Think*** 자동 스크롤
function autoSlide(){
$next.trigger('click');
$autoFun = setTimeout(autoSlide, 3000);//여기서는 setInterval을 사용할 수 없습니다. 두 번째 스트로크가 이루어질 때 중지가 실패하게 되는 수신 함수
}
//@Mr.Think*** 자동 스크롤 지우기
function clearAuto() {
clearTimeout($ 자동재미);
}


자세한 코드 분석은
코드 패키지 다운로드를 통해 소스코드를 확인하시기 바랍니다.