-
[이런 저런 이야기] 이미지 3장이 슬라이드 되는 자바스크립트 에서 질문 있어요!!2013.10.01 PM 08:13
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
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 개
- 재원이야
- 2013/10/01 PM 08:35
왜 html이랑 css를 전부 스크립트로 작성하시는지요?? html에서 a에다가 target="_blank" 로 지정하면 간단히 새창으로 열립니다만..
user error : Error. B.