|
編程（Programming）是編定程序的中文簡稱，就是讓計算機代碼解決某個問題，對某個計算體系規(guī)定一定的運算方式，使計算體系按照該計算方式運行，并最終得到相應結果的過程。為了使計算機能夠理解（understand）人的意圖，人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機，使得計算機能夠根據(jù)人的指令一步一步去工作，完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。 【實例名稱】 JS實現(xiàn)多幅圖片分頁滾動顯示 【實例描述】 本例可用于圖片新聞的展示，通過兩個div控件循環(huán)顯示所有的圖片。可修改本例中的代碼調整圖片滾動的速度。 【實現(xiàn)代碼】 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁-本站（www.xue51.com）</title>
<SCRIPT language="JavaScript">
var scrollerwidth=90 //指定div的高度
var scrollerheight=32 //指定div的寬度
var scrollerbgcolor='white'
var pausebetweenimages=3000 //圖片的間隔時間，默認為3秒。
//帶鏈接的圖片，存放在數(shù)組中
var slideimages=new Array()
slideimages[0]='<A href="http://www.baidu.com" target=_blank>
<IMG alt=百度搜索 border=0
height=40 src=http://www.baidu.com/img/logo.gif width=100></A>'
slideimages[1]='<A href=http://www.google.cn target=_blank>
<IMG alt=google搜索 border=0 height=40
src=http://www.google.cn/intl/zh-CN/images/logo_cn.gif width=100></A>'
slideimages[2]='<A href=# target=_blank>
<IMG alt=廣告位置為你準備 border=0 height=40 src="" width=100></A>'
slideimages[3]='<A href=http://www.google.cn target=_blank>
<IMG alt=google搜索 border=0 height=40
src=http://www.google.cn/intl/zh-CN/images/logo_cn.gif width=100></A>'
if (slideimages.length>1)
i=2 //初始化一個變量，用來做圖片數(shù)組的索引
else
i=0
function move1(mydiv)
{
tdiv=eval(mydiv) //獲取div對象
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=4){
//判斷div的y坐標
tdiv.style.pixelTop=0
//指定div的y坐標
setTimeout("move1(tdiv)",pausebetweenimages)
//設置轉換的時間間隔
setTimeout("move2(secondDiv)",pausebetweenimages)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
//div開始往上滾動
setTimeout("move1(tdiv)",100)
}
else{
tdiv.style.pixelTop=scrollerheight
//指定div的高度
tdiv.innerHTML=slideimages[i]
//將圖片顯示在div中
if (i==slideimages.length-1 )
//如果已經(jīng)循環(huán)到底，再從第一張開始循環(huán)
i=0
else
i++
}
}
function move2(mydiv)
{
tdiv2=eval(mydiv)
//獲取第二個div
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=4){
//判斷div的y坐標
tdiv2.style.pixelTop=0
//指定div的y坐標
setTimeout("move2(tdiv2)",pausebetweenimages)
//設置轉換的時間間隔
setTimeout("move1(firstDiv)",pausebetweenimages)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
//第二個div開始向上滾動
setTimeout("move2(secondDiv)",100)
}
else{
tdiv2.style.pixelTop=scrollerheight
//指定第二個div的高度
tdiv2.innerHTML=slideimages[i]
//將圖片顯示在div中
if (i==slideimages.length -1)
//如果已經(jīng)循環(huán)到底，再從第一張開始循環(huán)
i=0
else
i++
}
}
function startscroll()
//調用實現(xiàn)div層移動的方法
{
if (document.all){
move1(firstDiv)
secondDiv.style.top=scrollerheight
//設置第二章圖片的位置
}
}
window.onload=startscroll
//窗體一架載，便開始顯示圖片
</SCRIPT>
</head>
<body>
<SCRIPT language="JavaScript">
if (document.all){
document.writeln('<span id="main2" style="position:relative;
width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;
background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;
width:'+scrollerwidth+';height:'+scrollerheight+';
clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
document.writeln('<div id="firstDiv"
style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="secondDiv"
style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
</SCRIPT>
</body>
</html>
【運行效果】 【難點剖析】 本例重點是使用兩個diV循環(huán)顯示所有的圖片。為了屏蔽diV的圖層，需要將窗體的背景色設置為“white”(白色)。然后將第一個div的Y坐標設置為“1”，指定時間過后再讓此div的y坐標自動減小，實現(xiàn)圖層上移的效果。然后設置第二個div的y坐標，實現(xiàn)第二張圖片的顯示，依次循環(huán)顯示所有的圖片。 【源碼下載】 為了JS代碼的準確性，請點擊：JS實現(xiàn)多幅圖片分頁滾動顯示 進行本實例源碼下載 使用編程語言寫的程序，由于每條指令都對應計算機一個特定的基本動作，所以程序占用內存少、執(zhí)行效率高。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業(yè)用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡資源,如侵犯到您的權益,請及時通知我們(),我們會及時處理.
Copyright © 2018-2020 蘿卜系統(tǒng)下載站 手機站 關于本站
