fadein 효과를 사용한 2번째 예제입니다.
<ul id="scroll">
<li id="main_img_img0" style="position:absolute;z-index:10;top:0px;left:0;width:100%;"><img src="images/common/visual1.jpg" title="" alt=""></li>
<li id="main_img_img2" style="position:absolute;z-index:11;top:0px;left:0;width:100%;display:none;"><img src="images/common/visual2.jpg" title="" alt=""></li>
<li id="main_img_img3" style="position:absolute;z-index:11;top:0px;left:0;width:100%;display:none;"><img src="images/common/visual3.jpg" title="" alt=""></li>
</ul>
<script type="text/javascript">
//<![CDATA[
var s = null;
var j = 1;
var times = 4000;
function TiVis(){
clearInterval(s);
ButtonClear();
if( j == 0 ){ $("#main_img_img0").css({zIndex : 13});$("#main_img_img2").hide(); $("#main_img_img_tab1").attr('src','images/common/main_img_on.gif');$("#main_img_img0").fadeIn(1000);}
if( j == 1 ){ $("#main_img_img0").css({zIndex : 10});$("#main_img_img0").hide(); $("#main_img_img3").hide(); $("#main_img_img_tab2").attr('src','images/common/main_img_on.gif');$("#main_img_img2").fadeIn(1000);}
if( j == 2 ){ $("#main_img_img_tab3").attr('src','images/common/main_img_on.gif'); $("#main_img_img3").fadeIn(1000); }
j++;
if(j==3) {
j=0;
}
s = setInterval( "TiVis()", times );
}
window.onload = function(){
/*$("#main_img_img0").css({zIndex : 10});
$("#main_img_img2").css({zIndex : 11});
$("#main_img_img3").css({zIndex : 12});*/
$("#main_img_img_tab1").css({cursor:'pointer'});
$("#main_img_img_tab2").css({cursor:'pointer'});
$("#main_img_img_tab3").css({cursor:'pointer'});
s = setInterval( "TiVis()", times );
}
function ButtonClear(){
$("#main_img_img_tab1").attr('src','images/common/main_img_off.gif');
$("#main_img_img_tab2").attr('src','images/common/main_img_off.gif');
$("#main_img_img_tab3").attr('src','images/common/main_img_off.gif');
}
$(document).ready(function(){
$(".number_tab img").click(function(){
j = Number($(this).val());
if( j == 1 ){ $("#main_img_img0").css({zIndex : 13});$("#main_img_img2").hide();}
if( j == 2 ){ $("#main_img_img0").css({zIndex : 10});$("#main_img_img0").hide(); $("#main_img_img3").hide();}
ButtonClear();
TiVis();
});
});
//]]>
</script>
댓글 4개
게시글 목록
| 번호 | 제목 |
|---|---|
| 11623 |
웹서버
FTP 프로세스 죽이기
1
|
| 20284 | |
| 291 | |
| 11622 | |
| 20283 |
CSS
CSS slider 테스트1
|
| 20282 |
CSS
수평메뉴1
|
| 11620 |
node.js
Node.js 서버의 기본적인 내용 정리
1
|
| 20281 |
기타
dpi 환산표(?)
|
| 11619 | |
| 20280 | |
| 11612 |
PHP
숫자를 한글로 변환
2
|
| 11611 | |
| 11608 |
PHP
썸네일 클래스입니다
2
|
| 11605 | |
| 11602 |
MySQL
자주쓰는 MYSQL
2
|
| 11601 | |
| 11600 |
PHP
두지점의 위도,경도간 거리계산
|
| 11599 | |
| 11597 |
MySQL
무한 로딩 중인 쿼리 죽이기
1
|
| 11596 |
기타
파폭 ssh, ftp
|
| 11595 |
MySQL
mysql 기본 사용법
|
| 11594 | |
| 11593 | |
| 11592 |
jQuery
제이쿼리를 이용하여 노드 선택
|
| 11591 |
jQuery
append를 이용하여 엘리먼트 추가하기
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기