묻고답하기
슬라이더 질문입니다.
2017.06.28 14:51
본문소스를 올립니다.
슬라이더3에서 1로 돌아갈때 pre/next 함수를 만들어 자연스럽게 보이게 하고 싶은데 잘 안되네요
고수님들 도움주시면 감사하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
* {margin:0;padding:0;}
#wrap {
width:100%;
height:600px;
position: relative;
}
.wrap_abs_slider {
width:100%;
position: absolute;
left:0;
top:100px;
height:500px;
z-index: 0;
}
.wrap_sl_rel {
width:100%;
height:100%;
position: relative;
overflow: hidden;
}
.wrap_sl_rel>img {
position: absolute;
top:0;
width:100%;
height:500px;
}
.sl_img01 {
left:0%;
z-index: 3;
}
.sl_img02 {
left:100%;
z-index: 2;
}
.sl_img03 {
left:200%;
z-index: 1;
}
.wrap_abs_con {
position:absolute;
width:1000px;
left:50%;
margin-left:-500px;
top:100px;
z-index: 1;
height:500px;
}
.wrap_con_rel {
position: relative;
width:100%;
height:100%;
}
.wrap_con_rel>button {
position: absolute;
top:50%;
margin-top:-15px;
height:30px;
width:100px;
border:0;
background-color:#ff0000;
color:#fff;
}
.left {
left:0;
}
.right{
right:0;
}
.s_btn {
position: absolute;
left:50%;
margin-left: -75px;
width:150px;
height:30px;
list-style-type: none;
bottom:10px;
overflow: hidden;
}
.s_btn>li {
float: left;
}
.s_btn>li>a {
display: block;
width:30px;
height:30px;
margin-right:20px;
background-color: gray;
border-radius:15px;
}
.s_btn>li:nth-child(3)>a {
margin-right: 0;
}
.s_btn>li>a:hover {
background-color: #f00;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
var w01 = 0;
var w02 = 0;
var w03 = 0;
sl01 ();
setInterval(right_Click,3000);
$('.right').click(function(){
if(w01 == 1){
sl02();
}
else if(w02 == 1) {
sl03();
}
else if(w03 == 1){
sl_Next();
}
});
$('.left').click(function(){
if(w01 == 1){
sl_Pre();
}
else if(w02 == 1) {
sl01();
}
else if(w03 == 1){
sl02();
}
});
function right_Click() {
$('.right').trigger('click');
}
function sl_Pre() {
w01 = 0;
w02 = 0;
w03 = 1;
$('.sl_img01').animate({left:'-100%'},1000);
$('.sl_img02').animate({left:'-200%'},1000);
$('.sl_img03').animate({left:'0%'},1000);
$('.sl_img01').animate({left:'100%'},1000);
sbtn_03();
}
function sl_Next() {
w01 = 1;
w02 = 0;
w03 = 0;
$('.sl_img03').animate({left:'-100%'},1000);
$('.sl_img01').animate({left:'0%'},1000);
$('.sl_img02').animate({left:'100%'},1000);
$('.sl_img03').animate({left:'200%'},1000);
sbtn_01();
}
function sl01 (){
w01 = 1;
w02 = 0;
w03 = 0;
$('.sl_img01').animate({left:'0%'},1000);
$('.sl_img02').animate({left:'100%'},1000);
$('.sl_img03').animate({left:'200%'},1000);
sbtn_01();
}
function sl02 (){
w01 = 0;
w02 = 1;
w03 = 0;
$('.sl_img01').animate({left:'-100%'},1000);
$('.sl_img02').animate({left:'0%'},1000);
$('.sl_img03').animate({left:'100%'},1000);
sbtn_02();
}
function sl03 (){
w01 = 0;
w02 = 0;
w03 = 1;
$('.sl_img01').animate({left:'-200%'},1000);
$('.sl_img02').animate({left:'-100%'},1000);
$('.sl_img03').animate({left:'0%'},1000);
sbtn_03();
}
function sbtn_01() {
$('.s_btn>li:nth-child(1)>a').css('background','#c00');
$('.s_btn>li:nth-child(2)>a').css('background','#999');
$('.s_btn>li:nth-child(3)>a').css('background','#999');
}
function sbtn_02() {
$('.s_btn>li:nth-child(1)>a').css('background','#999');
$('.s_btn>li:nth-child(2)>a').css('background','#c00');
$('.s_btn>li:nth-child(3)>a').css('background','#999');
}
function sbtn_03(){
$('.s_btn>li:nth-child(1)>a').css('background','#999');
$('.s_btn>li:nth-child(2)>a').css('background','#999');
$('.s_btn>li:nth-child(3)>a').css('background','#c00');
}
});
</script>
<div id="wrap">
<div class="wrap_abs_slider">
<div class="wrap_sl_rel">
<img class="sl_img01" src="img/1.jpg" alt="">
<img class="sl_img02" src="img/2.jpg" alt="">
<img class="sl_img03" src="img/3.jpg" alt="">
</div>
</div>
<div class="wrap_abs_con">
<div class="wrap_con_rel">
<button class="left">left</button>
<button class="right">right</button>
<ul class="s_btn">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
- [2016/11/01] 묻고답하기 wrap으로 감싼 부분이 height 100퍼센트가 원래 안되나요...? *4
- [2016/04/15] 묻고답하기 네비게이션바 관련 코딩 도움 부탁드립니다
댓글 0
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
김병욱 | 위키의 마이그레이션이 가능한가요? [1] | 2017.06.30 by HowtoXE |
mkp9**** | UI단을 부트스트랩으로 디자인 할 수 있는지 궁금합니다. [1] | 2017.06.30 by HowtoXE |
홍홍홍 | 홈페이지 외부 노출 관련 [1] | 2017.06.30 by HowtoXE |
친절한상담원 |
PHP5.5 게시판 스팸글 조치방법
[2]
![]() | 2017.06.30 by 친절한상담원 |
쪼꼬마니 |
업데이트 후 관리자 로그인이 안되요.. ㅠㅠ
[1]
![]() | 2017.06.30 by Luatic™ |
튜닝셀프 | 로그인 에러가 뜹니다. | |
꿈틀잉 | 사이트맵에서 게시판 링크 모듈이름이 갱신이 안됩니다. | |
S#arp |
DoorWeb 레이아웃과 그외 질문 입니다.
[1]
![]() | 2017.06.29 by S#arp |
Miuna3 | 짧은주소 질문드립니다. [2] | 2017.06.29 by 블루카이 |
보따리c28f1 |
스케치북 웹진형의 문의드립니다.
![]() | |
달리다굼 | 탭메뉴를 클릭하면 글자가 사라집니다. [2] | 2017.06.29 by 달리다굼 |
Riri |
pdf를 새창열기 말고 다운로드되게 하고싶습니다.
[1]
![]() | 2017.06.29 by sejin7940 |
zxt**** | 스케치북 방명록에서 댓글 작성시 바로 확인하는법 | |
파란촌놈 | 게시판 스킨에 대한 질문입니다. [3] | 2017.06.28 by 파란촌놈 |
KimTAJO | nginx에서 access.log 살펴보신분 혹시 있으신가요? | |
리즈러브 | 슬라이더 질문입니다. | |
유주스토어2 |
스케치북 게시판의 목록화면에 글쓴이 부분의 영역을 늘리고 싶습니다.
![]() | |
운현 |
게시판 및 페이지 글쓰기/수정 오류
[1]
![]() | 2017.06.28 by sejin7940 |
koll**** | 게시판 검색 내용(제목+내용, 내용)에 확장변수 추가 가능여부 문의 [1] | 2017.06.28 by sejin7940 |
김남진 | xe 경로지정 문의 [1] | 2017.06.28 by sejin7940 |