안녕하세요

옛날에 만들었던 카페인데 이제 좀 활성화를 시켜보고싶어서 홍보좀 하려고 합니다.

전부터 운영해보고싶었던 카페인데 만들어놓고 이제야 재대로 해보자고 마음을 먹었네요.



블로그 서로이웃, 페이스북 친구, 페이스북 좋아요, 페이스북 팔로우, 인스타 팔로우, 인스타 좋아요, 유튜브 구독, 유튜브 좋아요 등 

SNS 수치를 올리고싶은분 아마 많이 계실텐데 그런분들끼리 서로 커뮤니케이션을 할 수 있는 공간을 만들어서 운영해보고싶습니다.



이제 시작단계라 아직 회원수는 6명이지만 재대로 관리하며 많은 사람이 소통할수있는 공간을 만들고싶습니다.






카페는 아래 이미지에 링크 걸어뒀습니다.

이미지 클릭 시 바로 이동 가능합니다!


추후 카페 내에서 티스토리 초대장 등을 걸고 이벤트도 진행 예정이니 많은 관심부탁드려요~




↑     이미지 클릭 시 카페로 이동합니다!!!!    ↑

잼이 1500개 좀 넘게 모여있길레 뽑기를 달렸습니다.





크크크크크크크크크크크크크크크크크크크크

아이작 현천 아네모네 클레어

신이납니다.


무과금에 라이트유저인데 벌써 현천 두장먹었네요



'모바일게임 > 오버히트' 카테고리의 다른 글

오버히트 오늘의 뽑기  (0) 2018.08.17
오버히트 오늘의 자랑질(전설4장먹음)  (0) 2018.08.08

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


이게 나라냐 ㅡㅡ


출처 네이버뉴스+조선일보



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

블로그 복귀  (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.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

+ Recent posts

티스토리 툴바