kay
조회 수 2186 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

FadeIn , FadeOut 을 이용한 간단한 이미지 노출.

하나가 사라지며 하나가 보여지는 그런... 

워낙 플러그인들이 잘 나와있지만

간단한걸 굳이 서치해서 적용하기 귀찮아서 가볍게 쓰기위해 만들었습니다.


사용법 

이미지에 "main_img" class를 추가.


<div class="main_img"></div>
<div class="main_img" style="display:none;"></div>
<div class="main_img" style="display:none;"></div>

<!-- 별도 버튼등이 있는 경우...안써도 됨. -->
<ul id="main_bar">
	<li>
		<a href="Javascript:fnMain_image(0);"><img id="main_bar1" src="/images/main/bar_on.jpg" ></a>
	</li>
	<li>
		<a href="Javascript:fnMain_image(1);"><img id="main_bar2" src="/images/main/bar_off.jpg" ></a>
	</li>
	<li>
		<a href="Javascript:fnMain_image(2);"><img id="main_bar3" src="/images/main/bar_off.jpg" ></a>
	</li>
</ul>


<script type="text/javascript">
<!--
	// 메인 롤링 s
	var main_img = 0;

	function fnMain_image(img_num)
	{
		if (img_num == 0 || img_num)
		{
			main_img = img_num;
		}else{
			main_img = parseInt(main_img) + 1;

			if( main_img > $(".main_img").length -1 )
			{
				main_img = 0;
			}
		}

		for (i=0;i < $(".main_img").length ; i++)
		{
			$(".main_img").eq(i).fadeOut('slow');
		//	$("#main_bar > li:eq("+i+") > a > img").attr("src","/images/main/bar_off.jpg");
		}

		$(".main_img").eq(main_img).fadeIn('slow');
		//$("#main_bar > li:eq("+main_img+")  > a > img").attr("src","/images/main/bar_on.jpg");
	}

	setInterval(function(){ fnMain_image(); }, 3000);
	// 메인 롤링 e
//-->
</script>
TAG •
?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
54 UI 특정 객체가 화면에 보이는지 여부 확인 kay 2015.12.14 1128
53 PlugIn jQuery Formatnumber , 콤마처리 kay 2015.11.03 684
52 UI Select Box Option 동적 추가 , 삭제 , 복사 kay 2015.09.18 2458
» etc FadeIn , FadeOut 을 이용한 간단한 메인 배너 이미지 노출. kay 2014.10.23 2186
50 etc 기본값 가져오기 get default value kay 2014.10.19 1462
49 UI woothemes FlexSlider - 슬라이더 file kay 2014.09.16 6157
48 PlugIn jQuery Org Chart - 조직도 그리기 file kay 2014.09.01 5580
47 UI Jquery Slider Bar / 슬라이더 바 3종 샘플 file kay 2014.07.28 5643
46 etc 페이지 또는 객체에서 특정 키워드 강조하기 2 kay 2014.06.14 2357
45 PlugIn Star Rating Plugin - jQuery 별점 주기 2 file kay 2014.05.01 9354
44 PlugIn jQuery Plugin For Auto Resizing iFrame - iFrame Resizer file kay 2014.03.10 10657
43 etc 우클릭 , 셀 선택 , 드래그 방지 스크립트 kay 2014.02.17 7578
42 etc Jquery Load 유무 체크하기 kay 2014.02.12 3653
41 PlugIn jquery-syaku.rolling 상하좌우 롤링 ( 자동롤링 , 버튼 ) 10 file kay 2014.02.09 15635
40 etc Table에 동적 Tr 추가/삭제 하기 kay 2014.02.09 19120
39 etc 한글/영어 byte 체크해서 자르기 1 kay 2013.11.30 8919
38 UI 동적으로 추가된 객체에 datepicker() 적용하기 kay 2013.11.06 6900
37 etc $.trim(str) trim... kay 2013.10.16 3623
36 A to Z Jquery 로 defaultValue 읽어오기 kay 2013.10.03 3483
35 A to Z readonly , disabled 지정하기 kay 2013.10.01 3871
Board Pagination Prev 1 2 3 Next
/ 3
CLOSE