반응형
기본 셀렉터

필터

설명

$(“div”)

모든 div 엘리먼트

$(“div a”)

Div의 자손 a 엘리먼트

$(“div>a”)

Div의 바로 아래 자식 a 엘리먼트

$(“div~a”)

Div의 다음에 나오는 모든 형제 a 엘리먼트

$(“div+a”)

Div의 바로다음에 나오는 a 엘리먼트

$(“div.class”)

클래스 class를 가지는 div 엘리먼트

$(“div#id”)

아이디 id 를 가지는 div 엘리먼트

$(“div[name]”)

어트리뷰트 name을 가진 div 엘리먼트

$(“input[type=text]”)

text Type 어트리뷰트를 가지는 input 엘리먼트

$(“input[type^=te]”)

te 로 시작하는 Type 어트리뷰트를 가지는 input 엘리먼트

$(“input[type$=xt]”)

xt로 끝나는 Type 어트리뷰트를 가지는 input 엘리먼트

$(“input[type*=t]”

t를 포함 하는 Type 트리뷰트를 가지는 input 엘리먼트

 

반응형
반응형

<html>
<head>
<script>
	//배열에 이미지 주소 넣기
	var img_arr=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg");
	var tmp=0;	 //현재 출력되는 이미지  
	var tot=img_arr.length-1;	 // 전체 배열의 갯수
	var timer	//setInterval을 담을 변수
	var direction=1;	//방향 1이면 정방향 -1이면 역방향
	
	function roll(val){
		if(!val){
			val=direction;
		}else{
			direction=val;
		}	
		
		tmp=tmp+val;
		
		//tmp 가 0보다 작으면 tmp 에는 마지막 배열
		//tmp 가 마지막 배열 숫자보다 크면 0
		if(tmp<0){
			tmp=tot;
		}else if(tmp>tot){
			tmp=0;
		}

		//target에 img_arr에 tmp 값 넣기
		document.getElementById("target").src="img/"+img_arr[tmp];
	}

	//timer멈춤
	function stopRoll(){
		window.clearInterval(timer);
	}

	//페이지 접속시 배열0의 이미지를 target에 넣는다
	//페이지 접속시 startRoll()을 실행
	window.onload=function(){
		document.getElementById("target").src="img/"+img_arr[0];
		startRoll();
	}
	
	//3초 마다 한번씩 roll()함수 실행
	function startRoll(){	
		timer=window.setInterval("roll()",3000);
	}
</script>
</head>
<body>
<div id="wrap">
	<div id="contents" >
		<img src="img/arrow_1.jpg" style="cursor:pointer" onclick="roll(-1)">	
		<img id="target" onmouseover="stopRoll()" onmouseout="startRoll()" style="cursor:pointer">
		<img src="img/arrow_2.jpg"  style="cursor:pointer" onclick="roll(1)">
	</div>
</div>
</body>
</html>

확인:http://azit4u.phps.kr/script/roll.php
반응형

'자바스크립트' 카테고리의 다른 글

자바스크립트로 각자리 숫자 합계 구하기  (0) 2014.01.24
글자수 체크 하기  (0) 2011.10.05
javascript 메뉴  (0) 2011.10.05
반응형

padding:A;
 - 상 하 좌 우 모두 a 값으로 패딩 적용
padding:TB RL;
 - 상하, 좌우 각각의 값이 같을 경우 사용
padding:T RL B;
 - 좌우 값이 같고 상하가 다를때 사용
padding:T R B L;
 - 상 우 하 좌

반응형

'웹표준&CSS' 카테고리의 다른 글

display,float,clear  (0) 2011.05.28
css 에서 id ,class  (0) 2011.05.27
display:inline; display:block;  (0) 2011.05.27
ul  (0) 2011.05.27
웹표준  (0) 2011.05.18
반응형

display:inline 이나 <span>  은  inline 속성을 가지고 있고 inline 의 특성상 left 정렬이 된다.

block 속성은 한줄씩 출력된다

block의 정렬은 float 으로 정렬 (가운데 정렬 margin:0 auto) // width 값 설정
inline은 text-align 으로 졍렬

float 속성
none,left,right

float 해준 후에 해당 정렬을 초기화 하기위해서
clear 해준다

clear 속성
left - 왼쪽 정렬 초기화 ,right - 오른쪽 정렬 초기화,both -모든 정렬 초기화
반응형

'웹표준&CSS' 카테고리의 다른 글

padding  (0) 2011.05.28
css 에서 id ,class  (0) 2011.05.27
display:inline; display:block;  (0) 2011.05.27
ul  (0) 2011.05.27
웹표준  (0) 2011.05.18

+ Recent posts