온라인 데모: 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가 애니메이션 상태가 아닌 경우에만 이동 기능을 실행합니다. . 애니메이션이 있는 한 클릭해도 아무 일도 일어나지 않습니다.