<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta name="viewport" content="user-scalable=no, initial-scale = 1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<script type="text/javascript">
var num = 1;
$(document).ready(function() {
$("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
$("ul.paging li.prev").click(function() {
num--;
if (num < 0) {num = 0; };
$("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
});
$("ul.paging li.next").click(function() {
num++;
var max=($("ul.tabMenu01 li").size())-1;
$("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
});
});
</script>
<style>
* {margin:0;padding:0;}
img {width:100%;border:none;}
</style>
</head>
<body>
<div class="tabCont">
<div class="cont"><img src="sian_01.jpg" usemap="#link1" alt="" /></div>
</div>
<ul class="paging">
<li class="prev">prev</li>
<li class="next">next</li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta name="viewport" content="user-scalable=no, initial-scale = 1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<script type="text/javascript">
var num = 1;
$(document).ready(function() {
$("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
$("ul.paging li.prev").click(function() {
num--;
if (num < 0) {num = 0; };
$("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
});
$("ul.paging li.next").click(function() {
num++;
var max=($("ul.tabMenu01 li").size())-1;
$("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
});
});
</script>
<style>
* {margin:0;padding:0;}
img {width:100%;border:none;}
</style>
</head>
<body>
<div class="tabCont">
<div class="cont"><img src="sian_01.jpg" usemap="#link1" alt="" /></div>
</div>
<ul class="paging">
<li class="prev">prev</li>
<li class="next">next</li>
</ul>
</body>
</html>
'web standard > jquery' 카테고리의 다른 글
| 수평네비게이션 기초 (0) | 2012.02.13 |
|---|---|
| 수직네비게이션 기초 (0) | 2012.02.13 |
| 스크롤 따라다니는 퀵메뉴 (0) | 2011.11.21 |
| iframe 다루기 (0) | 2011.11.16 |
| 로그인 입력폼 description 제어 (0) | 2011.11.09 |
