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

//@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'); //현재 클릭에 강조 스타일을 추가하고 동일한 레벨 요소의 강조 스타일을 제거합니다
}
})


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

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($ 자동재미);
}


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