이번에는 봄 여름 가을 겨울 위의 4개의 이미지를 클릭하면 나머지 이미지가 바뀌는것을 만들어 보려고한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01_어트리뷰트의_값을_수정하여_이미지_바꾸기</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style>
html * {
margin: 0;
padding: 0;
}
body {
padding: 10px;
margin-top: 100px;
}
body span {
color: red;
font-size: 30px;
}
p {
margin-bottom: 20px;
}
#wrapper {
width: 522px;
margin: 0 auto;
text-align: center;
}
li {
float: left;
list-style: none;
margin-left: 10px;
overflow: hidden;
width: 123px;
height: 40px;
}
li.first {
margin-left: 0px;
}
li a {
display: block;
width: 123px;
}
li a img {
display: block;
}
#nav {
width: 522px;
height: 40px;
margin: 0px auto 10px auto;
}
#image {
width: 522px;
height: 400px;
margin: 10px auto 0px auto;
}
#image img {
width: 522px;
height: 400px;
}
</style>
<script>
var season = ['spring', 'summer', 'fall', 'winter'];
function monoSet(){
for(var i = 1; i<season.length+1; i++){
$('#' + season[i-1] +'Btn > a > img').attr('src', 'images/btn'+ i + '_1.jpg');
}
};
function mainImgSet(seasonName){
$('#image > img').attr('src', 'images/' + seasonName + '.jpg');
}
function colorSet(seasonName, count){
$('#' + seasonName +'Btn > a > img').attr('src', 'images/btn' + count + '_2.jpg');
}
$(function(){
$('#nav > ul > li').each(function(i){
$(this).click(function(){
monoSet();
mainImgSet(season[i]);
colorSet(season[i], i+1);
});
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li id="springBtn" class="first on"><a href="#"> <img
src="images/btn1_2.jpg" />
</a></li>
<li id="summerBtn"><a href="#"> <img
src="images/btn2_2.jpg" />
</a></li>
<li id="fallBtn"><a href="#"> <img src="images/btn3_2.jpg" />
</a></li>
<li id="winterBtn"><a href="#"> <img
src="images/btn4_2.jpg" />
</a></li>
</ul>
</div>
<div id="image">
<img src="images/spring.jpg" alt="봄" />
</div>
</div>
</body>
</html>
'프로그래밍 언어 > JQuery' 카테고리의 다른 글
| Element 찾기 (1) (0) | 2016.02.02 |
|---|---|
| 자바스크립트로 HTML컨탠츠 변경 (0) | 2016.02.01 |
| 어트리뷰트 동작 및 변경 (0) | 2016.01.28 |
| 가위바위보 자바스크립트로 (0) | 2016.01.28 |
| 자바스크립트 위치찾기(2) (0) | 2016.01.28 |