기초 다지기
마크업
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/reset.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<style>
.header{width: 160px; height: 100vh; position: fixed; left:0; top:0; background:#333;}
img{vertical-align: top;}
.slidercontainer{margin-left: 160px;}
.slidewrap{display: flex;}
h1{background: #fff;text-align: center;padding: 10px 0;}
.btn{position: fixed; right:0; top:0; transform: translateY(-50%);}
.btn a{background:rgba(0,0,0,0.5); display: block; float: left; margin-left: 1px;}
a.prev{display: none;}
</style>
<body>
<div class="header">
<h1><img src="img/logo.gif" alt=""></h1>
</div>
<div class="slidercontainer">
<div class="slidewrap">
<div class="slide"><img src="img/vis_sec_biz.jpg" alt=""></div>
<div class="slide"><img src="img/vis_sec_company.jpg" alt=""></div>
<div class="slide"><img src="img/vis_sec_ir.jpg" alt=""></div>
<div class="slide"><img src="img/vis_sec_pr.jpg" alt=""></div>
<div class="slide"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1168.1197178232496!2d126.98959794741637!3d37.56963419240967!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca2e8d3b9a481%3A0xb35ff23646fa4c03!2z7KKF66Gc7Zi47YWU7KCc6rO87KeB7JeF7KCE66y47ZWZ6rWQ!5e1!3m2!1sko!2skr!4v1570704191971!5m2!1sko!2skr" width="380" height="480" frameborder="0" style="border:0;" allowfullscreen=""></iframe></div>
</div>
</div>
<div class="btn">
<a href="#" class="prev"><img src="/img/btn_slide_prev.png" alt=""></a>
<a href="#" class="next"><img src="/img/btn_slide_next.png" alt=""></a>
</div>
</body>
</html>
오른쪽으로 넘어가는 스크롤 만들기
<script>
$(function(){
var i = 0;
$(".slide").mCustomScrollbar({
theme:"minimal-dark"
});
$('a.next').click(function(){
$('a.prev').fadeIn()
i++
$('.slidewrap').animate({'margin-left':'-=380'})
if(i>=5){
i=0
$('.slidewrap').animate({'margin-left':'0'})
}
});
$('a.prev').click(function(){
});
});
</script>'얼렁뚱땅코드 > jquery' 카테고리의 다른 글
| 스크롤 이벤트와 마우스휠이벤트로 풀페이지 만들기 (0) | 2019.10.10 |
|---|---|
| mCustomScrollbar 예쁜 스크롤바 스크립트로 사용하기 (0) | 2019.10.10 |
| 짝수 홀수 버튼 만들어 나누기 (0) | 2019.10.08 |
| 자동으로 시간 돌아가게 해주기 (0) | 2019.09.27 |
| swiper:사용자가 제작한 네비게이션을 클릭하면 이미지 바뀌게하기 (0) | 2019.09.27 |