진짜 너무나도 귀찮음에도 불구하고 다시 블로그를 시작하려고 합니다.
공부할 땐 공부하느라 바빠서 못하고 취업하고 나니 일하느라 바빠서 못하고
회사 입사 2달 반도 안돼서 운 좋게 팀장으로 초고속 승진하고


한 번에 너무 많은 것들을 배우고 있어서 배운 거 정리도 할 겸 다시 코딩 쪽으로 포스팅을 하나둘씩 시작해보려고 합니다.

코딩쪽으로 궁금한게 있으신분들은 댓글 남겨주시면 아직 부족하지만 아는선에서 성심성의껏 답변해드리겠습니다 ㅇ_ㅇ



열심히 해서 초대장 나오면....그것도 열심히 뿌려보도록하겠습니다 ㅇ_ㅇ



'잡설 > 일상의 개소리' 카테고리의 다른 글

블로그 복귀  (1) 2018.10.18
북한 석탄 환적ㅡㅡ  (0) 2018.07.18
월급날이 다가온다  (0) 2018.07.11
익숙함에 속아 내일이 월요일임을 잊지 말자  (0) 2018.07.08
블로그 토탈 7만 돌파  (0) 2018.07.08
칠월 칠일  (0) 2018.07.07
블로그  (0) 2018.07.06
출퇴근 헬  (0) 2018.07.04
취업  (0) 2018.07.03
  1. 세미예 2018.10.19 09:28 신고

    앞으로 활동 기대할께요.

jQuery로 이미지 자동 슬라이드 만들기!


우선 이미지들을 올려줍시다.


 <div id="slide" val="1" mx="3">

<li id="img1"><img src="img/1.jpg" alt=""/></li>

<li id="img2"><img src="img/2.jpg" alt=""/></li>

<li id="img3"><img src="img/3.jpg" alt=""/></li>

</div>


id는 마음대로 설정하셔도 상관없습니다.


다음은 css값을 수정해줍시다.


    #slide{

      position:relative;

      width: 500px;

    }

    #slide li{

      position:absolute;

      top:0;

      left:0;

      display:none;

      -webkit-display:block;

    }

    #slide img{

      width:500px;

      height: 300px;

    } 


#slide li에 -webkit-display:block;를 따로 준 이유는 크롬에는 li를썼을때 이미지에서도 옆에 쩜이 찍혀버려서....굳이 필요없는태그 한줄 넣어봤습니다.

li대신 div태그를 쓰면 안써도 상관없습니다.


그리고 슬라이드 이미지에 크기값을 조정해줬습니다.




그리고 이제 스크립트를 선언해줍시다.



<script type="text/javascript"> 

imgslide(); //페이지가 로딩될때 함수를 실행합니다

function imgslide(){

  $val = $("#slide").attr("val"); //현재 이미지 번호를 가져옵니다

  $mx = $("#slide").attr("mx"); //총 이미지 개수를 가져옵니다

$("#img"+$val).hide(); //현재 이미지를 사라지게 합니다.

if( $val == $mx ){ $val = 1; } //현재이미지가 마지막 번호라면 1번으로 되돌립니다.

else{ $val++; } //마지막 번호가 아니라면 카운트를 증가시켜줍니다

$("#img"+$val).fadeIn(500); //변경된 번호의 이미지영역을 나타나게 합니다.괄호 안에 숫자는 페이드인 되는 시간을 나타냅니다.

$("#slide").attr('val',$val); //변경된 이미지영역의 번호를 부여합니다.

setTimeout('imgslide()',1000); //1초 뒤에 다시 함수를 호출합니다.(숫자값 1000당 1초)

}

</script>


주석으로 설명을 달아놨으니 자세한 설명은 생략합니다...ㅋㅋㅋ


이렇게하면 자동으로 이미지가 넘어가는 슬라이드를 만들 수 있습니다.

슬라이드가 아니어도 베너라던가...팝업이라던가...뭐 이런걸로 응용 할 수도 있겠지요

굳이 저 내용 다 외울 필요도 없어요.

그냥 이런 코드들 몇개 갖다놓고 필요한곳에 복붙하시면 됩니다.

다음 포스팅은 언제가 될지 모르겠지만 이 슬라이드에 버튼 기능을 추가해 볼까합니다.


이상으로 jQuery로 이미지 슬라이드 만들기 포스팅을 마칩니다.



'코딩 > jQuery' 카테고리의 다른 글

제이쿼리로 드롭다운메뉴 만들기  (0) 2018.08.10
jQuery로 이미지 슬라이드 만들기  (0) 2018.08.06
b(굵게), u(밑줄), i(기울임), br(줄바꿈) 태그에 대해서 알아봅시다!


차례대로 얘네입니다.

<br>태그는 줄을 바꿀때 사용합니다.

직접 한번 보시죠

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<b>b 안녕하세요! 요섹마입니다.</b><br>

<u>u 안녕하세요! 요섹마입니다.</u><br>

<i>i 안녕하세요! 요섹마입니다.</i>

</body>

</html>


각 태그 사이에 문장을 입력하면 적용되고,

문장 끝마다 br태그를 사용해줬습니다.



이렇게 입력 시



b 안녕하세요! 요섹마입니다.
u 안녕하세요! 요섹마입니다.

i 안녕하세요! 요섹마입니다. 


이렇게 나옵니다.

br태그를 뒤에 붙여줬기때문에 줄이 바뀌었습니다.


h1~h6태그를 제외한 나머지 문장태그는 br태그를 사용해서 줄을 바꿔줘야합니다.

안그러면


b 안녕하세요! 요섹마입니다. u 안녕하세요! 요섹마입니다. i 안녕하세요! 요섹마입니다. 


이런식으로 나와버립니다.

문장의 줄을 바꿀때는 꼭 br태그를 사용해줍시다.

'코딩 > HTML' 카테고리의 다른 글

HTML b, u, i, br 태그  (0) 2018.05.20
HTML h1~h6 태그  (0) 2018.05.19


h1~h6 태그에 대해서 알아봅시다!

h1~h6 태그는 각 섹션의 제목을 입력할 때 사용합니다.
각 숫자는 제목의 등급을 나타내고 h1이 가장 상위 제목, h6이 가장 하위 제목이고,
기본적으로 Bold효과가 들어갑니다.
그리고 h1~h6태그는 br태그를 사용하지 않아도 태그 선언을 종료하는 시점에서 자동으로 줄이 바뀝니다.

예를들어

<!DOCTYPE html>

<html>
<body>
<h1>안녕하세요 요섹마입니다.</h1>
<h2>안녕하세요 요섹마입니다.</h2>
<h3>안녕하세요 요섹마입니다.</h3>
<h4>안녕하세요 요섹마입니다.</h4>
<h5>안녕하세요 요섹마입니다.</h5>
<h6>안녕하세요 요섹마입니다.</h6>
</body>
</html>


이렇게 입력 시



이런식으로 화면에 출력이 됩니다.




'코딩 > HTML' 카테고리의 다른 글

HTML b, u, i, br 태그  (0) 2018.05.20
HTML h1~h6 태그  (0) 2018.05.19

+ Recent posts

티스토리 툴바