jquery를 이용한 초간단 image slide 구현
<!doctype html>
<html>
<head>
<title>jQuery Dynamic Image Loading Basic</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<style type="text/css">
<!--
//-->
</style>
<script type="text/javascript">
var gx_img_idx = 0;
var imgList = ["http://photo-media.daum-img.net/201003/08/yonhap/20100308104425253.jpg"
, "http://photo-media.daum-img.net/201003/08/newsis/20100308114211763.jpg"
, "http://photo-media.daum-img.net/201003/08/yonhap/20100308104504848.jpg"
, "http://photo-media.daum-img.net/201003/08/yonhap/20100308104424018.jpg"];
$(document).ready(function() {
$('#imgA').attr("src", imgList[0]);
$('a').click(function(e) {
var hx = $(this).attr('href');
if(hx == "#left") {
gx_img_idx--;
if(gx_img_idx == -1) gx_img_idx = 0;
else $('#imgA').attr("src", imgList[gx_img_idx]);
e.preventDefault();
}
else if(hx == "#right") {
gx_img_idx++;
if(gx_img_idx == imgList.length) gx_img_idx = imgList.length-1;
else $('#imgA').attr("src", imgList[gx_img_idx]);
e.preventDefault();
}
});
});
</script>
</head>
<body>
<table border=1>
<tr><td><a href="#left"> < </td>
<td>
<div id="tableA">
<img id="imgA" />
<img id="imgB" width=0 height=0/>
</div>
</td>
<td><a href="#right"> > </td></tr>
</table>
</body>
</html>