롤링배너를 구현 해야할 일이 생겼다.

롤링배너... 를 구현 하는데 여러가지 방법이 있겠다... jquery 같은 js 프레임웤을 쓰는 방법도 있겠고

기냥~ javascript 로 짜버리는 ... 방법도 있겠고, 뭐 flash 로 만들어버리는 방법도 있고...


지난 프로젝트에 롤링 배너를 구현한 부분이 있어서 고대로 가져와 적용해보려고.... 했으나...

시간도 늦고 졸리고 생각하기도 귀찮고 변형하기 짜증나서    생각할 부분이 좀 많아서 직접 짜버리기로 했뜸!



db에서 꺼내온 데이터들을 배열형식으로 view 단으로 가져온다.

가져온 데이터를 javascript 에서 만든 배열에 넣어준다.

미리 정의 되어져 있는 javascript 의 Array 메소드중 몇가지를 사용하여 구현한다.

사용할 메소드는...

  • pop : 배열의 마지막 원소를 제거한다. 제거된 원소를 반환한다.
  • push : 배열 끝에 원소를 추가한다. 배열의 길이를 반환한다.
  • shift : 첫번째 원소를 제거한다. 제거된 원소를 반환한다.
  • unshift : 배열의 시작 위치에 원소를 추가한다. 배열의 길이를 반환한다.


요따구 속성을 가지고 있는 메소드들을 이용할꺼다.

window.onload = function() {
	doSet();
}

var myArray = new Array("
  • 1
  • ", "
  • 2
  • ", "
  • 3
  • ", "
  • 4
  • "); // 순서때문에 아래 두줄 삽입 var temp = myArray.shift(); //배열의 맨처음 요소를 잘라내고 temp 에 담는다. (배열의 길이는 맨처음 요소가 빠졌으므로 하나 작아짐) myArray.push(temp); // 배열의 마지막에 temp 를 추가한다. (추가 했으므로 배열길이는 하나 늘어남) var arraylength = myArray.length; function doSet(){ var output = document.getElementById("banners"); for(var i=0; i < myArray.length; i++){ if(i==0){ output.innerHTML = myArray[i]; }else{ //output.innerHTML = output.outerHTML + myArray[i]; var kk = outerHTMLForFF(output); output.innerHTML = kk + myArray[i]; } } } // 파폭에서는 outerHTML 이 먹지 않으므로... 아래 펑션으로 처리함... function outerHTMLForFF(obj){ var parent = obj.parentNode; var temp = document.createElement(parent.tagName); temp.appendChild(obj); var retHTML = temp.innerHTML; parent.appendChild(obj); return retHTML; } function goRight() { var temp = myArray[myArray.length-1]; // temp 에 배열의 마지막 요소를 저장. myArray.pop(); //배열의 마지막 요소를 삭제하고 길이는 하나 줄어듬 myArray.unshift(temp); // 배열의 시작 위치에 temp 를 삽입, 길이는 하나 늘어남 doSet(); } function goLeft() { var temp = myArray.shift(); //배열의 맨처음 요소를 잘라내고 temp 에 담는다. (배열의 길이는 맨처음 요소가 빠졌으므로 하나 작아짐) myArray.push(temp); // 배열의 마지막에 temp 를 추가한다. (추가 했으므로 배열길이는 하나 늘어남) doSet(); }



    window.onload 를 이용해서 처음 페이지가 호출될때 doSet 펑션을 호출...

    이곳에서는 배열에 들어있는 내용을 순차적으로 뿌려주는 역할을 해준다.

    innerHTML, outerHTML 을 이용하여 뿌려줄것인데... outerHTML 은 FF 에서 사용할 수 없으므로...

    대체하는 펑션을 만들어주고...


    doNext(), doPrev() 들은 다음 배너로 또는 이전 베너로 넘어가는 버튼을 눌렀을때 호출할  펑션들이다.

    여기에서 위에서 설명한 Array 에 미리정의 되어있는 메소드들을  사용하여준다.


    끗!!!


    여기에 추가로 일정시간이 지나면 자동으로 롤링이 되는 기능을 넣자면...

    function change(){
    	day = new Date();
    	second = day.getSeconds();
    
    	goRight();
    		
    	setTimeout("change()",5000);
    }
    


    요런 펑션을 만들어주고... window.onload 에서 호출해주면 된다.

    정말 끗!


    아래는 html 부분....

    03 9, 2011 03:24 03 9, 2011 03:24
    iamback 이 작성.

    Trackback URL : http://pippen80.cafe24.com/trackback/265

    Trackback RSS : http://pippen80.cafe24.com/rss/trackback/265

    Trackback ATOM : http://pippen80.cafe24.com/atom/trackback/265

    1. Christian Louboutin Discount black friday

      Tracked from Christian Louboutin Discount black friday 11 4, 2014 18:28 Löschung

      i am back !! :: 배열을 이용한 간단한 롤링배너

    2. gucci scarf mens black friday

      Tracked from gucci scarf mens black friday 11 8, 2014 07:33 Löschung

      i am back !! :: 배열을 이용한 간단한 롤링배너


    « Prev : 1 : ... 19 : 20 : 21 : 22 : 23 : 24 : 25 : 26 : 27 : ... 251 : Next »