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

심플 롤링 배너 시작하기

이 포스팅에서는 생성자 함수, 프로토타입을 이용한 심플한 롤링 배너 구현 방법,원리에 대해 단계별 학습 진행해 보도록 합니다.

단계별 학습 중 첫 번째 단계이며 맨 하단의 링크를 통해 단계별 학습을 진행해 보세요.

마크업

html

<div id="banner1" class="rolling-banner">
    <img src="http://lorempixel.com/400/200/sports/1/">
    <img src="http://lorempixel.com/400/200/sports/2/">
    <img src="http://lorempixel.com/400/200/sports/3/">
    <img src="http://lorempixel.com/400/200/sports/5/">
    <img src="http://lorempixel.com/400/200/sports/6/">
    <img src="http://lorempixel.com/400/200/sports/7/">
</div>

CSS

css

.rolling-banner{
    position:relative;
    top:100px;
    left:100px;
    width:400px;
    height:200px;

    overflow:hidden;;
    border:2px solid #000;
}

.rolling-banner img{
    position:absolute;
    top:0;
    left:0;
}

JavaScrip

javascript

ion () {
    // 인스턴스 생성
    var rolling1 = new RollingBanner();
});

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

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

    this._init();
    this._initBannerPos();
    this.startAutoPlay();
}

RollingBanner.prototype = {
    // 요소 초기화
    '_init' : function () {
        this._$banners = $('#banner1 img');

    },
    '_initBannerPos' : function () {
        // 배너 위치 화면에서 모두 숨기기
        this._$banners.css({
            top : 200
        });
        // 0번째 배너 활성화
        this._$banners.eq(this._currentIndex).css({
            top : 0
        });
    },
    'startAutoPlay' : function () {
        var _self = this;

        // 타이머가 두 번이상 실행되지 않도록 조건 처리
            console.log(this._timerID);
            this._timerID = setInterval(function () {
                _self.nextBanner();
            }, 2000)
    },
    '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: 200,
            opacity : 0
        });

        // 현재 배너 사라지게 하기
        $outBanner.stop().animate({
            top: -200,
            opacity : 0
        }, 600);

        // 다음 배너 나타나게 하기
        $inBanner.stop().animate({
            top : 0,
            opacity : 1
        }, 600);
    }
}

Result View

See the Pen 심플 롤링 배너 by jaeheekim (@jaehee) on CodePen.

Related links

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

Jaehee's WebClub