• [이런 저런 이야기] 이미지 3장이 슬라이드 되는 자바스크립트 에서 질문 있어요!!2013.10.01 PM 08:13

게시물 주소 FONT글자 작게하기 글자 키우기

3장의 이미지가 슬라이드 되는 자바스크립트 인데요

3장의 이미지중 2장은 게시판으로 바로 연결이 되고

1장은 다른 사이트를 새창으로 열고 싶은데요

혼자서 알아보다가 해결하지 못하고 이렇게 도움을 청해봅니다 ㅠㅠ;

혹시 아시는분 계시면 좀 알려주실수있나해서요!!

var= target 이걸 사용하라던데 전 못하겟어요 ;;

아래에 자바 스크립트 소스 남겨볼게요!!




$(document).ready(function(){

var aBanner = [];

aBanner.push({url: '/board/gallery/read.html?no=69&board_no=8', img: '/web/upload/badasonamu/top/topbanner_01.gif'});
aBanner.push({url: '/board/gallery/read.html?no=68&board_no=8', img: '/web/upload/badasonamu/top/topbanner_02.gif'});
aBanner.push({url: 'http://www.jngirl.co.kr/', img: '/web/upload/badasonamu/top/topbanner_03.jpg'});





var iNo = 0; //
var iDuration = 5000; //롤링되는 시간
var iCount = aBanner.length;
var iWidth = $('.banner-area').width();
var iHeight = $('.banner-area').height();
var sOnBtn = '/web/upload/badasonamu/top/topbanner_bton.gif';
var sOffBtn = '/web/upload/badasonamu/top/topbanner_btoff.gif';
var iEffectCount = 4; //정의된 이벤트 수


/**
* 효과정의
* 0, 천천이 fadeout 시킨
* 1, 천천히 slideUp
* 2, 왼쪽으로 이동
* 3, 위로 이동
* 4, Random 위의 효과를 랜돔하게 보여줍니다.
*/
var iEffect = 0;

init();


oInterval = setInterval(loop, iDuration);


/**
* 초기 기능 버튼등을 활성화
*/
function init() {
$('.banner-image').html(template(aBanner[0], 10));

var aHtml = [];
var sSwitch = '';

for(var i=0; i sSwitch = i === 0 ? sOnBtn : sOffBtn;
aHtml.push('배너버튼');
}


$('.banner-btn').html(aHtml.join('')).find('img').css({cursor:'pointer'}).mouseover(function() {
clearInterval(oInterval);
iNo = Number($(this).attr('no')) - 1;

iNo = iNo === -1 ? (iCount-1) : iNo;

oInterval = setInterval(loop, iDuration);
loop();
});
}


function template(aBanner, zIndex) {
return '배너';
}

function loop() {

iNo++;
iNo = iCount === iNo ? 0 : iNo;


$('.banner-btn img').each(function(iBtnNo) {
var sSwitch = (iBtnNo === iNo) ? sOnBtn : sOffBtn;
$(this).attr('src', sSwitch);
});


$('.banner-image').append(template(aBanner[iNo], 9));

var iRand = iEffect == 4 ? (Math.floor(Math.random() * iEffectCount)) : iEffect;


effects($('.banner-image img:first').css({zIndex:10}), iRand);
}



function effects(node, iRand) {
var removeNode = function() {
$(this).remove();
};

switch(iRand) {
case 0:
$(node).fadeOut('slow', removeNode);
break;

case 1:
$(node).slideUp('slow', removeNode);
break;

case 2:
$(node).animate({"left": iWidth+"px"}, 500, removeNode);
break;

case 3:
$(node).animate({"top": iHeight+"px"}, 500, removeNode);
break;

default :
$(node).fadeOut('slow', removeNode);

}
}

});
댓글 : 1 개
왜 html이랑 css를 전부 스크립트로 작성하시는지요?? html에서 a에다가 target="_blank" 로 지정하면 간단히 새창으로 열립니다만..
친구글 비밀글 댓글 쓰기

user error : Error. B.