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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 11040 |
JavaScript
자바스크립트를 이용해 모니터 해상도 구하기
2
|
| 11037 |
JavaScript
모바일 접속시 모바일 페이지로 이동하기
2
|
| 11028 |
MySQL
SQL 문장의 실행순서
8
|
| 11019 |
MySQL
초보자들을 위한 팁(count편)
8
|
| 11017 | |
| 11012 |
MySQL
트리거를 이용한 날짜 자동 업데이트
4
|
| 10999 |
PHP
배열 순서 섞기
12
|
| 10990 |
JavaScript
체크박스 전체선택/해제/반전
8
|
| 10984 |
JavaScript
마우스휠이벤트 등록 및 활용
5
|
| 20478 | |
| 20151 | |
| 10973 |
JavaScript
부분 프린터하기
10
|
| 10970 |
JavaScript
GET으로 넘어온 파라미터 가져오기
2
|
| 10966 |
JavaScript
첨부파일 확장자 체크 [정규식]
3
|
| 10962 |
JavaScript
iframe 아이프레임 투명처리
3
|
| 10961 | |
| 10959 |
PHP
주민번호 검사기
1
|
| 10958 | |
| 10951 |
JavaScript
화면 줌(ZOOM); 필요한분이 있으려나...;
6
|
| 10947 | |
| 10945 | |
| 10944 |
PHP
utf8 체크하기
|
| 20463 | |
| 10943 | |
| 10939 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기