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

티스토리 툴바