jQuery - banner와 indicator를 이용해 만들기

// js_017_banner_03_indicator.js

(function($){

  

  // 1. 인디케이터 클릭시 해당하는 광고내용이 움직이게

  // 101. 인디케이터를 어느것을 클릭했는지?

  // 102. 클릭한 인디케이터의 위치에 따른 광고의 위치?

  // 103. 선택한 순서에 맞는 인티케이터에 act를 담기

 

  var banner = $('.banner_01');

  var indicator = banner.find('.indicator');

  var indiUl = indicator.find('ul');

  var indiLi = indiUl.find('li');

  var indiLink = indiLi.find('a');

 

  var viewArea = banner.find('.view_area');

  var viewUl = viewArea.find('ul');

 

  var n = 0;

 

  // 이벤트

  indiLink.on('click', function(e){                     // 주소에 해당하는 'a'태그 = indiLink를 클릭 시

    e.preventDefault();                                 // 기본적인 이벤트의 기능을 제어

    // 주체의 부모인 li의 순번

    var _thisI = $(this).parent().index();              // a 태그는 순서를 가지고 있지 않고, li는 순서를 가진다. 그렇기에 $(this)=a, 의 부모요소(parent())인 li가 몇번째에 위치해 있는가(index)

    n = _thisI;                                         // 위에 선언한 변수를 n 으로 설정하여, 위 내용을 indiLink 함수이외에는 모르기때문에, 밖에다 n에대한 값을 지정해서 인식하게 함

    // 광고이동

    viewUl.stop().animate({marginLeft: (-100*n) + '%'}) // 위의 결과로 viewUl이 현재 배너 화면이 animate로 왼쪽으로( marginLeft : -100% ) 이동해 다음화면이 나오도록 함.

 

    // .act 처리

    // $(this).parent().siblings().removeClass('act');

    // $(this).parent().addClass('act');

 

    indiLi.eq(n).addClass('act');                       // act class가 실행되도록 한다

    indiLi.eq(n).siblings().removeClass('act');         // 첫째 선택된거 외에 나머지 형제들을 제거 

  });

 

})(jQuery);

====================================================================

// js_017_banner_03_indicator_02.js

(function($){

  

  // 1. 인디케이터 클릭시 해당하는 광고내용이 움직이게

  // 1 하위 상세한 내용 (100단위)

  // 101. 인디케이터를 어느것을 클릭했는지?

  // 102. 클릭한 인디케이터의 위치에 따른 광고의 위치?

  // 103. 선택한 순서에 맞는 인티케이터에 act를 담기

  // ==============

  // 104. 일정시간마다 광고배너영역이 움직이도록 처리 -> setInterval

  // 105. 마우스 올리면 정지 -> clearInterval

  // 106. 일정시간마다 움직이다 마우스 올리면 정지, 벗어나면 다시 동작

  // 107. 마지막 내용이 보일때 처음으로 이동하는 형태로 수정 

  // ============== 

 

  var banner = $('.banner_02');

  var indicator = banner.find('.indicator');

  var indiUl = indicator.find('ul');

  var indiLi = indiUl.find('li');

  var indiLink = indiLi.find('a');

 

  var viewArea = banner.find('.view_area');

  var viewUl = viewArea.find('ul');

  var viewLi = viewUl.find('li');

 

  var indiLiLen = indiLi.length;

  var n = 0;

  var timed = 600;

 

  // 마지막 요소 붙여넣기, ul의 가로길이 / li의 가로길이 조정

  var cloneLi = viewLi.eq(-1).clone(); 

  viewUl.prepend(cloneLi); // cloneLi 항목을 viewUl 앞에 붙인다.

  var newViewLi = viewUl.find('li');

  var newLen = newViewLi.length;

  // console.log(indiLiLen, newLen);

  viewUl.css({width:(100 * newLen ) + '%', left: -100 + '%', position: 'relative'});

  newViewLi.css({width:(100 / newLen) + '%'});

 

  // 함수 생성

  var slideMoveFn = function(n, interval){

    // setInterval기능과 마지막 위치에서 처음으로 이동시

    if( n <= 0 && interval){ viewUl.css({marginLeft:100 + '%'})};

    // 광고이동

    viewUl.stop().animate({marginLeft: (-100*n) + '%'}, timed);

    // act처리

    indiLi.eq(n).addClass('act');

    indiLi.eq(n).siblings().removeClass('act');

  };

 

  // 이벤트

  indiLink.on('click', function(e){

    e.preventDefault();

    n = $(this).parent().index();

    slideMoveFn(n, false);

  });

 

  // 반복기능 -> clearInterval에서 제어하기위해 변수로 지정

  var autoMoveFn;

  var slideGoFn = function(){

    autoMoveFn = setInterval(function(){

      n += 1;

      if( n >= indiLiLen ){ n = 0; }

      slideMoveFn(n, true);

    }, timed*4);

    return autoMoveFn;

  };

 

  var slideStopFn = function(){

    clearInterval(autoMoveFn);

  };

  slideGoFn();

 

  banner.on({ 'mouseenter' : slideStopFn, 'mouseleave' : slideGoFn });

 

  // setInterval(기능수행, 시간); -> 일정 시간 마다 기능을 수행

  // setTimeout(기능수행, 시간); ->  일정 시간 후에 기능을 수행

  // clearInterval( 반복수행기능이름 ); -> setInterval기능을 강제로 정지

 

  // 선택자.trigger('이벤트') -> button.trigger('click') -> 버튼을 대신 클릭하겠다!

 

})(jQuery);