심플 롤링 배너(생성자 함수) - 단계별 학습 #3

상속을 활용한 심플 롤링 배너 - 단계별 학습 #3

이 글에서는 단계별 학습 #2에 이어 생성자(클래스) 상속을 활용해 기능을 확장하는 방법에 알아봅니다.

그리고 일반적인 롤링 배너의 경우 배너 영역에 마우스가 들어오는 경우에 롤링 효과가 멈추가 마우스가 배너 영역 밖으로 나가는 경우 다시 롤링되는 기능을 가지고 있는데 이 기능을 상속을 통해 좌측 롤링 배너에만 적용하여 구현해 보도록 합니다.

HTML & CSS

마크업 및 CSS는 기존에 진행한 단계별 학습 #2와 동일하며 자바스크립트 소스만 알아보도록 하겠습니다.

JavaScript

javascript

$(function () {
    // 인스턴스 생성
    // 롤링 배너 인터벌 3초 지정, 롤링 애니메이션효과  1초
    var rolling1 = new RollingBanner("#banner1", 3000, 1000);
    
    // 상속 받은 자식으로 호출
    var rolling2 = new ChildRolling("#banner2", 1000, 500);
});

// 메서드와 프로퍼티를 담을 생성자(클래스)를 생성
function RollingBanner(selector, speed, animateSpeed) {
    // 프로퍼티 생성 및 초기화

    // 배너 목록을 담을 프로퍼티 생성
    // (객체 내부에서만 사용할 프로퍼티이기 때문에 private이라는 의미로 언더바(_)를 사용)
    this._$banners = null;
    // 초기 활성화된 인덱스 정보를 담을 프로퍼티 생성
    this._currentIndex = 0;
    this._timerID = -1;
    this._bannerHeight = 0;
    this._speed = speed;
    this._aniSpeed = animateSpeed;

    this._init(selector);
    this._initEvent();

}

RollingBanner.prototype = {
    // 요소 초기화
    '_init' : function (selector) {
        this._$banners = $(selector).children("img");
        this._bannerHeight = this._$banners.eq(0).height();

    },
    // 이벤트 처리
    '_initEvent' : function () {
        var _self = this;
        // 롤링 배너 위치값 자동 설정하기 위해 높이값 구하기
        // 이미지와 같은 리소스까지 모두 읽어들여야 높이값을 구할 수 있기 때문에
        // onload 이벤트를 이용
        this._$banners.eq(0).one('load', function () {
            _self._bannerHeight = $(this).height();
            _self._start();
        })
    },
    '_start' : function () {
        this._initBannerPos();
        this.startAutoPlay();
    },
    '_initBannerPos' : function () {
        // 배너 위치 화면에서 모두 숨기기
        this._$banners.css({
            top : this._bannerHeight
        });
        // 0번째 배너 활성화
        this._$banners.eq(this._currentIndex).css({
            top : 0
        });
    },
    'startAutoPlay' : function () {
        var _self = this;

        // 타이머가 두 번이상 실행되지 않도록 조건 처리
        if(this._timerID == -1) {
            this._timerID = setInterval(function () {
                _self.nextBanner();
            }, this._speed); // 인터벌 지정
        }
    },
    'nextBanner' : function () {
        // 현재 인덱스값 구하기
        var outIndex = this._currentIndex;

        // 다음 배너 인덱스값 구하기
        this._currentIndex++;

        // 마지막 배너까지 롤링되면 다시 0번째부터 롤링되도록 인덱스값 설정하기
        if (this._currentIndex >= this._$banners.length) {
            this._currentIndex = 0;
        }

        // 현재 배너 구하기
        var $outBanner = this._$banners.eq(outIndex);

        // 다음 배너 구하기
        var $inBanner = this._$banners.eq(this._currentIndex);

        // 롤링 준비 - 나타날 다음 배너 위치 초기화
        $inBanner.css({
            top: this._bannerHeight,
            opacity : 0
        });

        // 현재 배너 사라지게 하기
        $outBanner.stop().animate({
            top: -this._bannerHeight,
            opacity : 0
        }, this._aniSpeed); // 애니메이션 스피드 지정

        // 다음 배너 나타나게 하기
        $inBanner.stop().animate({
            top : 0,
            opacity : 1
        }, this._aniSpeed); // 애니메이션 스피드 지정
    }
}

/**
 * -----------------------
 * 프로토타입 상속 활용
 * -----------------------
 */
// 자식 롤링 배너 생성자(클래스)
function ChildRolling(selector, speed, animateSpeed) {
    this._$rolling = null;
    RollingBanner.call(this, selector, speed, animateSpeed);
}

// RollingBanner 상속받기
ChildRolling.prototype = new RollingBanner();
ChildRolling.prototype.constructor = ChildRolling;

    // 요소 초기화
    ChildRolling.prototype._init = function (selector) {
        this._$rolling = $(selector);
        // 부모 생성자의 _init() 메서드 호출
        RollingBanner.prototype._init.call(this, selector);
    };

// 메서드 override
ChildRolling.prototype._initEvent = function () {
    // 부모의 _initEvent  메서드를 호출
    RollingBanner.prototype._initEvent.call(this);

    var _self = this;
    // 마우스가 롤링 배너 영역에 호버되는 경우에 롤링 효과 정지
    this._$rolling.on('mouseenter', function () {
        _self.stopAutoPlay();
    });

    // 마우스가 롤링 배너 영역에 밖으로 아웃되는 경우 롤링 효과 재시작
    this._$rolling.on('mouseleave', function () {
        _self.startAutoPlay();
    });

};

// 롤링 효과 정지
ChildRolling.prototype.stopAutoPlay = function () {
    if (this._timerID != -1) {
        clearInterval(this._timerID);
        this._timerID = -1;
    }
}

Result View

See the Pen 심플 롤링 배너(상속활용) #3 by jaeheekim (@jaehee) on CodePen.

Related links

1. 심플 롤링 배너 - 단계별 학습 #1
2. 심플 롤링 배너 - 단계별 학습 #2
3. 심플 롤링 배너(다형성,합성 활용) - 단계별 학습 #4

Jaehee's WebClub