<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="main">
<div id="l" onclick="Img.Ldo()" style="float:left; width:20px;">Left</div>
<div id="con"></div>
<div id="r" onclick="Img.Rdo()" style="float:right; width:20px;">Right</div>
</div>
<script>
var imgs = [
"1.gif",
"2.gif",
"3.gif",
"4.gif",
"5.gif",
"6.gif",
"7.gif"
]
function $(o){return document.getElementById(o);}
var Img = {
num   : 3,//一次显示图片数
inum  : 0,//第一张位置
lnum  : imgs.length,//最后一张的索引
init  : function(){
//alert("inum:"+Img.inum + "<br>imgs:" + imgs.length);
var str = "";
for (var i=Img.inum;i<Img.inum + Img.num;i++){
if (imgs[i]){
//str = "<img src=\""+imgs[i]+"\" />";
str += imgs[i];
}
}
$("con").innerHTML = str;
if (Img.inum>=imgs.length - Img.num){$("l").style.display="none";}else{$("l").style.display="block";}
if (Img.lnum>=imgs.length){$("r").style.display="none";}else{$("r").style.display="block";}
},
Ldo   : function(){
//if (Img.inum >= imgs.length - Img.num){return}
//if (Img.lnum <=0){Img.lnum = imgs.length;}
Img.inum ++;
Img.lnum --;
Img.init();
},
Rdo   : function(){
Img.inum --;
Img.lnum ++;
Img.init();
}
}
Img.init();
</script>
</BODY>
</HTML>