| 編程（Programming）是編定程序的中文簡稱，就是讓計算機代碼解決某個問題，對某個計算體系規定一定的運算方式，使計算體系按照該計算方式運行，并最終得到相應結果的過程。為了使計算機能夠理解（understand）人的意圖，人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機，使得計算機能夠根據人的指令一步一步去工作，完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。 【實例名稱】 JS實現循環滾動顯示圖片 【實例描述】 隨著Blog的日漸鼎盛，個人信息的網絡存儲越來越受人們青睞。目前最流行的個人相冊，是個人風采的又一展示方式。在相冊中通常可以通過滾動的形式瀏覽照片。本例介紹如何在網站中實現圖片的滾動。 【實例代碼】 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>無標題頁-本站（www.xue51.com）</title>
<script language="javascript">
//定義要顯示的圖片數組
imgArr=new Array()
imgArr[0]="<a href=http://www.google.com/
onmouseMove='javascript:outHover=true'
onMouseover='javascript:outHover=true'
onMouseout='javascript:outHover=false;mvStart()'>
<img src=LOGO1.gif border=0></a>"
imgArr[1]="<a href=http://www.baidu.com/
onmouseMove='javascript:outHover=true'
onMouseover='javascript:outHover=true'
onMouseout='javascript:outHover=false;mvStart()'>
<img src=LOGO2.gif border=0></a>"
imgArr[2]="<a href=http://www.google.com/
onmouseMove='javascript:outHover=true'
onMouseover='javascript:outHover=true'
onMouseout='javascript:outHover=false;mvStart()'>
<img src=LOGO1.gif border=0></a>"
imgArr[3]="<a href=http://www.baidu.com/
onmouseMove='javascript:outHover=true'
onMouseover='javascript:outHover=true'
onMouseout='javascript:outHover=false;mvStart()'>
<img src=LOGO2.gif border=0></a>"
imgArr[4]="<a href=http://www.google.com/
onmouseMove='javascript:outHover=true'
onMouseover='javascript:outHover=true'
onMouseout='javascript:outHover=false;mvStart()'>
<img src=LOGO1.gif border=0></a>"
//內部變量
var moveStep=4; //步長，單位：pixel
var moveRelax=100; //移動時間間隔，單位：ms
ns4=(document.layers)?true:false;
var displayImgAmount=4 ; //視區窗口可顯示個數
var divWidth=220; //每塊圖片占位寬
var divHeight=145; //每塊圖片占位高
var startDnum=0;
var nextDnum=startDnum+displayImgAmount;
var timeID;
var outHover=false;
var startDivClipLeft;
var nextDivClipRight;
//初始化層
function initDivPlace()
{
if (ns4)
{
for (i=0;i<displayImgAmount;i++){
eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)
}
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.divOuter.document.divAds"+i+
".left="+divWidth*displayImgAmount)
}
}else{
for (i=0;i<displayImgAmount;i++){
eval("document.all.divAds"+i+
".style.left="+divWidth*i)
}
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.all.divAds"+i+
".style.left="+divWidth*displayImgAmount)
}
}
}
//設置定時器移動圖片
function mvStart(){
timeID=setTimeout(moveLeftDiv,moveRelax)
}
//清除定時器，停止移動
function mvStop(){
clearTimeout(timeID)
} function moveLeftDiv(){
if (ns4){
for (i=0;i<=displayImgAmount;i++){
eval("document.divOuter.document.
divAds"+parseInt((startDnum+i)%imgArr.length)+".left=
document.divOuter.document.divAds"+
parseInt((startDnum+i)%imgArr.length)+".left-moveStep")
} startDivClipLeft=parseInt(eval("document.
divOuter.document.divAds"+startDnum+".clip.left"))
nextDivClipRight=parseInt(eval("document.divOuter.
document.divAds"+nextDnum+".clip.right")) if (startDivClipLeft+moveStep>divWidth){
eval("document.divOuter.document.divAds"+
nextDnum+".clip.right="+divWidth)
eval("document.divOuter.document.divAds"+
startDnum+".left="+divWidth*displayImgAmount)
eval("document.divOuter.document.divAds"+
parseInt((nextDnum+1)%imgArr.length)+".left=
document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)
eval("document.divOuter.document.divAds"+
parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")
startDnum=(++startDnum)%imgArr.length
nextDnum=(startDnum+displayImgAmount)%imgArr.length
startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
}else{
eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")
startDivClipLeft+=moveStep
nextDivClipRight+=moveStep
}
eval("document.divOuter.document.divAds"+
startDnum+".clip.left="+startDivClipLeft)
eval("document.divOuter.document.divAds"+
nextDnum+".clip.right="+nextDivClipRight)
}else{
for (i=0;i<=displayImgAmount;i++){
eval("document.all.divAds"+
parseInt((startDnum+i)%imgArr.length)+".style.left=
document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+
".style.pixelLeft-moveStep")
}
startDivClipLeft=parseInt(eval("document.all.divAds"+
startDnum+".currentStyle.clipLeft"))
nextDivClipRight=parseInt(eval("document.all.divAds"+
nextDnum+".currentStyle.clipRight"))
if (startDivClipLeft+moveStep>divWidth){
eval("document.all.divAds"+nextDnum+".style.clip=
'rect(0,"+divWidth+","+divHeight+",0"+")'")
eval("document.all.divAds"+startDnum+
".style.left="+divWidth*displayImgAmount)
eval("document.all.divAds"+
parseInt((nextDnum+1)%imgArr.length)+".style.left=
document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)
startDnum=(++startDnum)%imgArr.length
nextDnum=(startDnum+displayImgAmount)%imgArr.length
startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
}else{
startDivClipLeft+=moveStep
nextDivClipRight+=moveStep
}
eval("document.all.divAds"+startDnum+".style.clip=
'rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")
eval("document.all.divAds"+nextDnum+".style.clip=
'rect(0,"+nextDivClipRight+","+divHeight+",0)'")
}
if (outHover){
mvStop()
}else{
mvStart()
}
}
//定義顯示圖片的層
function writeDivs(){
if (ns4){
document.write("<ilayer name=divOuter width=750 height="+divHeight+">")
for (i=0;i<imgArr.length;i++){
document.write("<layer name=divAds"+i+">")
document.write(imgArr[i]+" ")
document.write("</layer>")
}
document.write("</ilayer>")
document.close()
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.divOuter.document.divAds"+i+".clip.right=0")
}
}else{
document.write("<div id=divOuter
style='position:relative' width=750 height="+divHeight+">")
for (i=0;i<imgArr.length;i++){
document.write("<div id=divAds"+i+
" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")
document.write(imgArr[i]+" ")
document.write("</div>")
}
document.write("</div>")
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.all.divAds"+i+
".style.clip='rect(0,0,"+divHeight+",0)'")
}
}
}
writeDivs();
initDivPlace(); 需要在body中添加啟動事件，代碼如下所示：
</script>
</head>
<body onload="mvStart()">
<p>
調試其他進程的能力賦予您極廣泛的權力，這是無法通過其他途經獲得的，
在進行遠程調試時更是如此。惡意的調試器可能對正在調試的計算機造成大范圍的損害。
因此，對可能進行調試的人要有所限制。有關更多信息，請參見<a
>遠程調試權限</a>。</p>
<p>
但是，許多開發人員沒有意識到安全威脅也可以從相反的方向產生。
調試對象進程中的惡意代碼可能危害調試計算機的安全：有許多必須防范的不道德的安全利用。</p>
<h1 >
安全性最佳做法</h1>
</body>
</html>
【運行效果】  【難點剖析】 本例的重點是ilayer層和Array數組。其中數組是JavaScript的重要對象，用來存儲一系列類型相同的數據。ilayer層具有三維的感覺，使設計者能夠對相互重疊的層組成的三維層進行精確地控制，這些相互重疊的層是Web頁上透明或不透明的內容。 【源碼下載】 為了JS代碼的準確性，請點擊：JS實現循環滾動顯示圖片 進行本實例源碼下載
使用編程語言寫的程序，由于每條指令都對應計算機一個特定的基本動作，所以程序占用內存少、執行效率高。
| 
