> 웹 프론트엔드 > JS 튜토리얼 > jQuery_jquery를 기반으로 한 그림 왼쪽 및 오른쪽 원활한 스크롤 플러그인

jQuery_jquery를 기반으로 한 그림 왼쪽 및 오른쪽 원활한 스크롤 플러그인

WBOY
풀어 주다: 2016-05-16 17:53:27
원래의
1127명이 탐색했습니다.

온라인 데모: http://demo.jb51.net/js/2012/myslideLeftRight/
패키지 다운로드: http://www.jb51.net/jiaoben/44973.html
핵심 코드:

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

( function($ ){
$.fn.extend({
"slidelf":function(value){
value = $.extend({
"prev":"",
"next" :"",
"speed":""
},value)
var dom_this = $(this).get(0); //jquery 객체를 DOM 객체로 변환합니다. 다른 함수에서 호출;
var marginl =parseInt($("ul li:first",this).css("margin-left")); //각 이미지 여백의 값
var movew = $ ("ul li:first",this).outerWidth() marginl; //슬라이딩해야 할 값
//왼쪽 애니메이션
function leftani(){
$("ul li:first",dom_this).animate({"margin-left":-movew},value.speed,function(){
$(this).css("margin-left",marginl).appendTo( $("ul",dom_this) );
});
}
//오른쪽 애니메이션
function rightani(){
$("ul li:last",dom_this ).prependTo($("ul" ,dom_this));
$("ul li:first",dom_this).css("margin-left",-movew).animate({"margin-left": marginl},value.speed);
}
//왼쪽 클릭
$("." value.prev).click(function(){
if(!$("ul li:first",dom_this).is(" :animated")){
leftani();
}
});
//왼쪽 클릭
$(". " value.next).click(function(){
if(!$("ul li:first",dom_this).is(":animated")){
rightani();
}
})
}
} ; (여기서 이동을 구현하기 위해 음수 margin-left를 사용합니다.)
2. 슬라이딩이 완료된 후 이 LI를 마지막 LI에 삽입합니다(끊김 없는 스크롤을 위해)
오른쪽을 클릭합니다 --
1. 마지막 LI를 첫 번째 LI에 삽입하고 보이는 영역 바깥쪽에 위치시킵니다. (여기서는 여백이 사용됩니다.)
 2. 그런 다음 보이는 영역 안으로 밀어 넣습니다.
참고: 여기서 IF 판단문은 "왼쪽" 또는 "오른쪽" 버튼을 계속 클릭하여 발생하는 버그를 방지하기 위한 것입니다.
이 판단의 의미: LI가 애니메이션 상태가 아닌 경우에만 이동 기능을 실행합니다. . 애니메이션이 있는 한 클릭해도 아무 일도 일어나지 않습니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿