롤링이미지가 아닌, 고정된 이미지가 서서히 다른이미지로 바뀌는 소스입니다. 한번에 확확 바뀌는 것보다 부드럽게 조금씩 겹치면서 바뀌는게 훨씬 고급스러운 느낌이 듭니다. 보통 이미지위에 마우스를 오버시킬 경우 (마우스를 갖다 대는 경우) 서서히 바뀌는 소스들은 많은데, 고정된 이미지가 자동으로 부드럽게 바뀌는 소스는 생각보다 많이 검색 되지 않는것 같더라구요. 그래서 포스팅 하게 되었습니다. ^ ^ 기본적으로 굵은 글씨로표시된 부분들 수정하시면 될거예요~^^
손가락을 눌러주시면 더 많은 분들이 볼 수 있습니다.^^
<HTML>
<HEAD>
<TITLE>부드러운 이미지 전환<TITLE>
<META http-equiv="content-type" content="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
var img1 = new Image();
img1.src = "이미지경로";
var img2 = new Image();
img2.src = "이미지경로";
var img3 = new Image();
img3.src = "이미지경로"; //같은 색깔끼리 한 셋트입니다. 총 이미지 갯수에따라 숫자를 추가하거나 지우세요.
//-->
</script>
</HEAD>
<BODY onLoad="init()">
<script language="JavaScript">
<!--
var maxLoops = 3; // 총 이미지의 갯수입니다. 윗부분에 var img 들의 마지막 숫자가 같아야 합니다.
var bInterval = 2; // 전환시 잠깐 멈춰있는 시간수치입니다
var count = 2;
function init() {
blendtrjs.filters.blendTrans.apply();
document.images.blendtrjs.src = eval("img"+count+".src");
blendtrjs.filters.blendTrans.play();
if (count < maxLoops) {
count++;
}
else {
count = 1;
}
setTimeout("init()", bInterval*700+2000);
}
//-->
</script>
<!-- 링크된 이미지 추출할 부분 -->
<img src="이미지경로" name="blendtrjs" border="0" style="filter: blendTrans(duration=2)"> <!--제일 처음보일 이미지경로를 적어주세요. -->
</BODY>
</HTML>
'코딩' 카테고리의 다른 글
| 카테고리 선택박스 소스, 멀티플 셀렉트박스 (0) | 2012.10.24 |
|---|---|
| 모바일홈페이지에서 이미지에 전화연결 링크 (1) | 2012.09.05 |
| 게시판 파일찾기 박스, 입력박스 세로스크롤자동 (0) | 2012.08.16 |
| 새창 팝업형식으로 띄우는 자바스크립트 (0) | 2012.07.10 |
| 센터정렬 페이지에서 고정되는 퀵메뉴소스, 따라다니는 배너 (4) | 2012.07.02 |
댓글