허접 배너 Viewer 맛보기.

ITWeb/개발일반 2011. 12. 9. 16:07

지난 번 허접 텍스트 sliding 포스팅 후 이미지 돌리는 것도 보여 달라고 해서..ㅡ.ㅡ;
구글링 하면 아주 멋진거 많은데..

뭐.. 후배가 보여 달라면 보여줘야죠.. ㅋ
기교 이런거 하나도 없이 생짜 코드 들어 갑니다.

기본 컨셉은 linked list 를 바탕으로 작성을 했으나 코드를 보시면 전혀 그런 내용은 없습니다.
단순히 배열을 가지고 loop 돌리는게 전부 입니다. ㅡ.ㅡ;;

[구글검색 linkedlist]
- http://www.google.co.kr/search?q=javascript+linkedlist

[구현코드]

<!DOCTYPE html>

<html>

<head>

<title>BannerSlider</title>

var bannerList = ['banner1.png', 'banner2.png', 'banner3.png', 'banner4.png', 'banner5.png']

var bannerSize = 4; // 이 숫자 바꾸면 그 크기만큼 돌아 갑니다.

var bannerIndexLast = bannerSize - 1;

var bannerIndexCurrent = 0;

var bannerIndexLeft;

var bannerIndexRight;

var bannerWidth = 320;

var bannerHeight = 48;

var imageList = new Array(bannerSize);

var swapIndex = 'front';

// 이건 잘 아시는 이미지 preload 입니다.
function bannerPreload () {

for ( var i=0; i<bannerSize; i++ ) {

imageList[i] = new Image();

imageList[i].src = bannerList[i];

}

bannerIndexLeft = bannerIndexLast;

bannerIndexRight = 1;

}

// 이름이 view 와 slide 로 되어 있는건 사실 slide 효과를 주기 위해 시작을 한거구요.
// 일단은 효과 빼고 배너 돌리는거 부터 보여 줄라고 이래 되었습니다.

function moveLeft () {

var adView;

var adSlide;

switch ( swapIndex ) {

case 'front' :

adView = document.getElementById('adFront');

adSlide = document.getElementById('adBack');

swapIndex = 'back';

break;

case 'back' :

adView = document.getElementById('adBack');

adSlide = document.getElementById('adFront');

swapIndex = 'front';

break;

}

// 이 부분은 예전에 작성한 DOM Linknig Element 를 이용해서 하면 더 좋겠지만
// 빠르게 보여 주다 보니..
// 이전 글 참고 : http://jjeong.tistory.com/522

adSlide.innerHTML = "<img src='"+bannerList[bannerIndexRight]+"' border='0' width='320px' height='48px'>";

leftSlide(adView, adSlide);

}

// 왼쪽 화살표 클릭 했을 때 sliding 될 배너의 위치를 지정하고 돌리기 위한 함수 임돠.

function leftSlide (adViewer, adSlider) {

var temp;

adViewer.style.left = '0px';

adSlider.style.left = '320px';

temp = adViewer.style.zIndex;

adViewer.style.zIndex = adSlider.style.zIndex;

adSlider.style.zIndex = temp;

adSlider.style.left = '0px';

bannerIndexLeftCalc();

}

// linkedilst 를 가장한 배열의 순서를 계산하는 함수 임돠.

function bannerIndexLeftCalc () {

bannerIndexLeft = bannerIndexCurrent;

bannerIndexCurrent = bannerIndexRight;

if ( bannerIndexRight == bannerIndexLast ) {

bannerIndexRight = 0;

} else {

bannerIndexRight++;

}

// 여기서 부터는 왼쪽과 반대 입니다.

function moveRight () {

var adView;

var adSlide;

switch ( swapIndex ) {

case 'front' :

adView = document.getElementById('adFront');

adSlide = document.getElementById('adBack');

swapIndex = 'back';

break;

case 'back' :

adView = document.getElementById('adBack');

adSlide = document.getElementById('adFront');

swapIndex = 'front';

break;

}

adSlide.innerHTML = "<img src='"+bannerList[bannerIndexLeft]+"' border='0' width='320px' height='48px'>";

rightSlide(adView, adSlide);

}

function rightSlide (adViewer, adSlider) {

var temp;

adViewer.style.left = '0px';

adSlider.style.left = '-320px';

temp = adViewer.style.zIndex;

adViewer.style.zIndex = adSlider.style.zIndex;

adSlider.style.zIndex = temp;

adSlider.style.left = '0px';

bannerIndexRightCalc();

}

function bannerIndexRightCalc () {

bannerIndexRight = bannerIndexCurrent;

bannerIndexCurrent = bannerIndexLeft;

if ( bannerIndexLeft == 0 ) {

bannerIndexLeft = bannerIndexLast;

} else {

bannerIndexLeft--;

}

bannerPreload();

</script>

</head>

</div>

</body>

</html>

※ Code Refactoring 할 내용은 보시는 바와 같이 많이 있습니다. 그건 각자 알아서.. ㅎㅎ
※ 위 코드는 sliding 효과를 전제 하다 보니 <div> 를 두개 사용하게 된거구요.. 아래는 그냥 이미지 대체용 입니다. 코드는 완전 간단해 집니다.

// 그냥 좌우 확인해서.. image list 에 대한 array index 로만 replace 하는 내용 입니다.
// 뭐.. div.innerHTML 이 싫으신 분은 그냥 image.src 로 하셔도 크게 상관 없습니다.
// 이럴려면 <img> 에 id 를 부여하거나 tag name 으로 처리 하시거나요.
function bannerChange(dir) {

switch ( dir ) {

case 'left' :

if ( bannerIndexCurrent >= 4 ) {

bannerIndexCurrent = 0;

} else {

bannerIndexCurrent++;

}

break;

case 'right' :

if ( bannerIndexCurrent <= 0 ) {

bannerIndexCurrent = bannerIndexLast;

} else {

bannerIndexCurrent--;

}

break;

}

adView = document.getElementById('adFront');

adView.innerHTML = "<img src='"+bannerList[bannerIndexCurrent]+"' border='0' width='320px' height='48px'>";

}

jjeong

허접 배너 Viewer 맛보기.

티스토리툴바