<!DOCTYPE html>
<html>

<head>
</head>

<body>
<script>

document.oncontextmenu = function(){
window.event.returnValue=false; 
}

</script>
<p>&nbsp;</p>
<p>
<p id="imgName">恐龍進化史</p>
<img id="imgdata"alt="開始" height="240" src="開始.jpg" width="320" /></p>
<button type="button" onclick='showNext()'>下一階段</button>

<script>
var num=0;
var dom = document.getElementById("imgdata");
var imgName = document.getElementById("imgName");

function showPrev(){
num = num - 1;
if (num > 0 )
{
dom.src = "素材" + num + ".jpg";
imgName.innerHTML = "檔案名稱：素材" + num + ".jpg";
} else {

num = 4;
dom.src = "素材" + num + ".jpg";
imgName.innerHTML = "檔案名稱：素材" + num + ".jpg";
}


}


function showNext(){
num = num + 1;
if (num <= 4 )
{

dom.src = "素材" + num + ".jpg";
imgName.innerHTML = "檔案名稱：素材" + num + ".jpg";

}
else
{
num = 1;
dom.src = "素材" + num + ".jpg";
imgName.innerHTML = "檔案名稱：素材" + num + ".jpg";

}


}

</script>

<p>&nbsp;</p>


</body>

</html>