공지사항
-
- 디지털 시대의 디지털 액티비티
- 뎡야핑
본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>배너 만들기 - 2일차</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
#banner {
position: absolute;
}
.btn_wrap {
position: absolute;
top: 10px;
right: 10px;
width: 80px;
}
.btn_wrap p {
float: left;
font-size: 11px;
margin-right: 4px;
}
.btn_wrap p span {
font-weight: bold;
}
.btn_wrap a {
display: inline-block;
text-indent: -666em;
width: 23px;
height: 23px;
overflow: hidden;
background: url('../images/btn.gif') no-repeat;
float: left;
}
.btn_wrap a.next {
background-position: -23px 0;
}
.btn_wrap a.pre:hover {
background-position: -0 -23px;
}
.btn_wrap a.next:hover {
background-position: -23px -23px;
}
</style>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery-migrate-1.2.1.min.js"></script>
<script>
jQuery(document).ready(function(){
// .next를 누를 때마다 .big 안의 img의 src를 바꿔준다. 01~07
// 문제 1: .next를 누를 때 num이 7 이상 증가하면 안 된다.
// 즉 num이 7보다 작다면 1씩 증가하면 된다.
var num=1;
$(".next").on("click", function() {
if(num < 7) { //비교연산자: <, >, <=, >=, ==, !=(다르다)
num=num+1;
} else {
num=1;
}
$(".img_num").text(num);
$(".big img").attr("src","../images/0"+num+".jpg");
});
$(".pre").on("click", function() {
if(num > 1) {
num=num-1;
} else {
num=7;
}
$(".img_num").text(num);
$(".big img").attr("src","../images/0"+num+".jpg");
});
var del=setInterval(auto,2000);
function auto() {
$(".next").trigger("click");
}
});
</script>
</head>
<body>
<div id="banner">
<p class="big">
<img src="../images/01.jpg" alt="배너">
</p>
<div class="btn_wrap">
<p class="img_num_wrap">
<span class="img_num">1</span>/7
</p>
<a href="javascript:" class="pre">이전</a>
<a href="javascript:" class="next">다음</a>
<a href="javascript:" class="auto">자동</a>
</div>
</div>
</body>
</html>
최근 댓글 목록