안녕하세요
옛날에 만들었던 카페인데 이제 좀 활성화를 시켜보고싶어서 홍보좀 하려고 합니다.
전부터 운영해보고싶었던 카페인데 만들어놓고 이제야 재대로 해보자고 마음을 먹었네요.
블로그 서로이웃, 페이스북 친구, 페이스북 좋아요, 페이스북 팔로우, 인스타 팔로우, 인스타 좋아요, 유튜브 구독, 유튜브 좋아요 등
SNS 수치를 올리고싶은분 아마 많이 계실텐데 그런분들끼리 서로 커뮤니케이션을 할 수 있는 공간을 만들어서 운영해보고싶습니다.
이제 시작단계라 아직 회원수는 6명이지만 재대로 관리하며 많은 사람이 소통할수있는 공간을 만들고싶습니다.
카페는 아래 이미지에 링크 걸어뒀습니다.
이미지 클릭 시 바로 이동 가능합니다!
추후 카페 내에서 티스토리 초대장 등을 걸고 이벤트도 진행 예정이니 많은 관심부탁드려요~
↑ 이미지 클릭 시 카페로 이동합니다!!!! ↑
| [에폭시스티커] 파주 에폭시 에폭시스티커 저렴한 업체 (0) | 2018.06.23 |
|---|
잼이 1500개 좀 넘게 모여있길레 뽑기를 달렸습니다.
크크크크크크크크크크크크크크크크크크크크
아이작 현천 아네모네 클레어
신이납니다.
무과금에 라이트유저인데 벌써 현천 두장먹었네요
| 오버히트 오늘의 뽑기 (0) | 2018.08.17 |
|---|
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로 이미지 슬라이드 만들기 포스팅을 마칩니다.
| 제이쿼리로 드롭다운메뉴 만들기 (0) | 2018.08.10 |
|---|
| 익숙함에 속아 내일이 월요일임을 잊지 말자 (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 |
| 블로그 (0) | 2018.07.01 |
| ㅋㅋ (0) | 2018.06.29 |
