<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
var total=4;
var k=1;
info();
$("#a1").click(function()
{
if (k==1)
{
k=1;
alert("已是最前頁");
}
else
{
k--;
}
info();
});
$("#a2").click(function()
{
if (k==4)
{
k=4;
alert("已是最後一張");
}
else
{
k++;
}
info();
});
function info()
{
$("#dv2").html("<img id='img1' src='./image/a1"+(k-1)+".jpg' height='500' width='650' />");
$("#img1").hide();
$("#img1").show();
$("#dv1").html("影像共幾筆"+total+"===目前是第"+k+"筆");
}
});
</script>
<body>
<div id="dv1" style="width:690px; height:40px; background-color:#996">
</div>
<div id="dv2" style="background-color:#9CC; width:650px; height:500px" >
</div>
<div id="dv3" style="width:680px; height:40px; " align="right">
<a id="a1" href="javascript:void();">上一頁 </a>
<a id="a2" href="javascript:void();">下一頁</a>
</div>
</body>
</html>
===========================================
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
var total=4;
var k=1;
var adtimer;
info();
$("#a1").click(function()
{
if (k==1)
{
k=1;
alert("已是最前頁");
}
else
{
k--;
}
info();
});
$("#a2").click(function()
{
show();
});
$("#a3").click(function()
{
var str=$("#a3").text();
if (str=="自動播放")
{
$("#a3").text("停止播放");
adtimer=setInterval(show,1000);
}
else
{
$("#a3").text("自動播放");
clearINterval(adtimer);
}
});
function show()
{
if(k==total)
{
clearINterval(adtimer);
$("#a3").text("自動播放");
alert("已是最後一張");
k=total;
}
else
{
k++;
}
info();
}
function info()
{
$("#dv2").html("<img id='img1' src='./image/a1"+(k-1)+".jpg' height='500' width='650' />");
$("#img1").hide();
$("#img1").show();
$("#dv1").html("影像共幾筆"+total+"===目前是第"+k+"筆");
}
});
</script>
<body>
<div id="dv1" style="width:690px; height:40px; background-color:#996">
</div>
<div id="dv2" style="background-color:#9CC; width:650px; height:500px" >
</div>
<div id="dv3" style="width:680px; height:40px; " align="right">
<a id="a1" href="javascript:void();">上一頁 </a>
<a id="a2" href="javascript:void();">下一頁</a>
<a id="a3" href="javascript:void();">自動播放</a>
</div>
</body>
</html>
================================
沒有留言:
張貼留言