jQuery 그림 스크롤 그림의 효과(대체 구현)_jquery

요구 사항: 사진 전환 시 다음 화면에 빈 항목이 표시되면 안 됩니다. 즉,

1. 마지막 화면에서 이동한 항목 수가 표시할 항목 수보다 적은 경우 차액(표시된 항목 수 - 마지막 화면의 항목 수)만 이동합니다. 예: 각 화면에는 7개의 항목이 표시되어야 하지만 총 개수는 10개에 불과합니다. 다음 화면으로 스크롤해도 사용자에게는 여전히 7개의 항목이 표시됩니다. 이때 이동해야 할 항목은

입니다.

이 효과는 jQuery를 기반으로 작성되었습니다. 더 이상 고민하지 않고 코드를 게시하겠습니다

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

(function( $ ){
var Slider = function( elem , args ){
this.config = $.extend({
effect : 'x', //효과 수준 - x
: 600 , //애니메이션 속도
Trigger : 'mouseenter', //이벤트 트리거
콜백 속도 : null , // 콜백 함수
view : 7
}, args | | {} );

this.history = [];//이동 기록 기록
this.index = 0;
this.el = elem;
this.length = this.el.find('li').length;//레코드의 전체 길이
this.width = this.el.find('li').eq(0).outerWidth();// 각각을 기록합니다. 단일 항목의 너비
this.init();
}
Slider.prototype = {
constructor: Slider,
init: function(){
this. 바인딩이벤트( );
},
바인딩이벤트: 함수(){
this.prev();
this.next();
},
prev: 함수(){
el.find('[data-type="left"]').click( $.proxy(function(){

                                                                                                                                                      는 아무 움직임도 수행되지 않았음을 증명하므로 직접 반환합니다.

this.index--;
var step = this.history.pop();//마지막 이동 단계 가져오기
var move = step * this.width;//이동 계산 width
this.el.find("ul").animate( { "left" : " =" move "px" } , this.config.speed )

                   , this)); ){
                                                                                                   ~   
                                  
This.index ;
//이 계산은 매우 중요합니다
//디스플레이 수가 전체 길이보다 큰지 계산합니다(다음 페이지* 보기). 예를 들어 현재 첫 페이지( 1 1) *7 > ; 12 (전체 길이) // 그러면 this.step 할당은 나머지, 즉 나머지 숫자에 대한 것입니다.
if (this.config.view * (this.index 1) & gt; this.length ){
this.step = this.length%this.config.view;
}else{
                                            This.step = this.config.view; 🎜>           }
dth;
this.el.find("ul").animate( { "left" : " =" move "px" } , this.config.speed )

                 , this));                             }

$.fn.slider = function( args ){
return this.each(function(){
var el = this;
var 플러그인 = 새 슬라이더( $( el ) , args );
                                                                                                                        
처음에는 이 구현에 대해 좋은 아이디어가 없었습니다. 원래는 변수를 사용하여 현재 이동 횟수를 기록하려고 했으나 갑자기 이런 종류의 처리를 수행하기 위해 배열을 사용한다는 생각이 들었습니다. 갑자기 명확해졌습니다.

이 구현의 초점은 움직임 단계를 기록하는 배열입니다. 왼쪽으로 이동할 때는 해당 단계를 배열에 밀어 넣습니다. 오른쪽으로 이동할 때는 배열 [].pop()에서 마지막 항목을 가져옵니다.

요구 사항을 달성하는 데는 매우 좋은 방법이지만 조금 까다롭습니다. 조언을 부탁드립니다.