묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
html 사진 슬라이드 질문
2019.10.20 18:03
제가 자바스크립트를 잘 몰라서 html/css로만 웹을 만들고 있는데요 슬라이드는 만들었는데 안에 이미지를 넣고 싶습니다 근데 이미지를 넣으면 슬라이드 작동을 안해서 어떻게 해야할지 모르겠습니다
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <body>
- <style>
- *{margin:0;padding:0;}
- ul,li{list-style:none;}
- #slide{height:300px;position:relative;overflow:hidden;}
- #slide ul{width:400%;height:100%;transition:1s;}
- #slide ul:after{content:"";display:block;clear:both;}
- #slide li{float:left;width:25%;height:100%;}
- #slide li:nth-child(1){background:#faa;}
- #slide li:nth-child(2){background:#ffa;}
- #slide li:nth-child(3){background:#faF;}
- #slide li:nth-child(4){background:#aaf;}
- #slide input{display:none;}
- #slide label{display:inline-block;vertical-align:middle;width:10px;height:10px;border:2px solid #666;background:#fff;transition:0.3s;border-radius:50%;cursor:pointer;}
- #slide .pos{text-align:center;position:absolute;bottom:10px;left:0;width:100%;text-align:center;}
- #pos1:checked~ul{margin-left:0%;}
- #pos2:checked~ul{margin-left:-100%;}
- #pos3:checked~ul{margin-left:-200%;}
- #pos4:checked~ul{margin-left:-300%;}
- #pos1:checked~.pos>label:nth-child(1){background:#666;}
- #pos2:checked~.pos>label:nth-child(2){background:#666;}
- #pos3:checked~.pos>label:nth-child(3){background:#666;}
- #pos4:checked~.pos>label:nth-child(4){background:#666;}
- </style>
- <div id="slide">
- <input type="radio" name="pos" id="pos1" checked>
- <input type="radio" name="pos" id="pos2">
- <input type="radio" name="pos" id="pos3">
- <input type="radio" name="pos" id="pos4">
- <ul>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
- <p class="pos">
- <label for="pos1"></label>
- <label for="pos2"></label>
- <label for="pos3"></label>
- <label for="pos4"></label>
- </p>
- </div>
- </body>
- </html>
태그 연관 글
- [2017/03/02] 묻고답하기 게시판리스트 분류이동버튼 문의드립니다 *2
- [2017/01/23] 묻고답하기 DB Table 생성을 해야 설치가 완료됩니다.
- [2016/12/21] 묻고답하기 고수님들 제발 도와주세요. 창크기에 따라서 위젯 위치가 자꾸 변합니다 *1
- [2016/08/02] 묻고답하기 검색부분을 가운데로 하고싶은데요 어떻게 하는 건가요? *1
- [2016/06/10] 묻고답하기 footer 고정 *8
댓글 2
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
피앤알 | 회원가입 형식 문제(송동우님께....) 도움 부탁드립니다. [1] | 2011.06.20 by 송동우 |
공대생임 | 게시판이 너무 느려요 [3] | 2011.04.26 by pico |
woongb | 텍스타일 site ID접속으로 만들면 방문자수 계속 0으로 뜨는 이유? [1] | 2011.04.13 by 카르마 |
Doo | XE설치 이후 메뉴 생성 문제입니다. | |
:DunhillBoy | ㅠㅠ 서버이전 후 에러... 도와주세요. [1] | 2010.09.28 by Gekkou |
zzeng09 | 회원가입 한글사용 가능하게 하려면... [2] | 2010.08.17 by zzeng09 |
Breton | 정말 괜찮은 호스팅을 찾고 기뻐하기도 잠시..ㅠ [1] | 2010.08.16 by 이온디 |
sakurastorm | WidgetHandler.class.php 에러 [2] | 2009.04.26 by sakurastorm |
띵야 | 특정 오픈 ID로 로그인 시도시 Unsupported protocol: https 에러에 대하여 | |
earthhero.me | 오픈아이디 회원가입은 어디서 하나요? [3] | 2009.02.03 by earthhero.me |
aeolus | 큐브리드(7.3.0) + XE(1.1.4) 설치시 관리자 로그인 에러 | |
낭만홀리님 | 회원가입 없이 Open ID 사용으로만 가능할까요? [1] | 2009.01.06 by test |
신주호 | 회원관리에서 Query ID 오류 문제 ㅠㅠ [1] | 2008.12.09 by 비나무 |
낭만홀리님 | open id 접속자만 보이게 할 수 있나요? [3] | 2008.08.07 by withover.com |
이윤호155 | 오픈ID 끝에 / 에 따른 로그인 이상문제 |
#slide li:nth-child(1){background:#faa;}
이 부분을
#slide li:nth-child(1){background-image:url(이미지경로/image.jpg); }
이런식으로 바꿔보세요.
위 html 파일과 이미지가 같은 폴더에 저장되어 있고, 파일명이 1.jpg 라고 가정하면,
#slide li:nth-child(1){background-image:url(./1.jpg); }
참고로,
위 html 파일이 있는 폴더에 이미지폴더를 img 라고 만들어 저장되어 있고, 파일명이 1.jpg 라고 가정하면,
#slide li:nth-child(1){background-image:url(./img/1.jpg); }