相冊的自動播放效果SlideShow

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 相冊的自動播放效果SlideShow

相冊的自動播放效果SlideShow

編輯：CSS詳解

　寫了個SlideShow的原型,利用image的complete,判斷圖片是否調用完全，調用完全以後才顯示，否則是LOADING的圖片，還考慮的是

　　1.每調用一張圖片之前先出現loading的過程,

　　2.調用圖片中不會因為網速和圖片過大而未顯示全,直接跳到下一張,要按順序一張一張播放.

　　3.第一次播放的時候，因為調用圖片會慢一點，重新播放是調用CACHE裡的，速度就快了

<Html>

<head>

<title>SlideShow</title>

<!--

var yourImages = new Array("/School/UploadFiles_7810/201104/20110411082253412.jpg")

var currCount=0

var stop=false

function getimg(n){

preImages= new Image()

preImages.src = yourImages[n]

}

function autoPlay(){

if(currCount!=yourImages.length){

document.getElementById("img").style.display="none"

getimg(currCount)

document.getElementById("loadingbar").style.display="block"

setTimeout("loadingImg()",1000)

}

else{

currCount=0;

if (confirm("播放完畢,是否重新播放?")){

return autoPlay()

}

function loadingImg(){

if (preImages.complete) {

document.getElementById("img").src="/School/UploadFiles_7810/201104/20110411082253903.gif"

document.getElementById("loadingbar").style.display="none"

document.getElementById("img").style.display="block"

document.getElementById("img").src=yourImages[currCount]

currCount=currCount+1

}

setTimeout("autoPlay()",4000)

}

//-->

</script>

</head>

</div>

</body>

</Html>

CSS詳解

CSS樣式表與HTML網頁的關系: 最近因為幫一個網友很費神的修改了一個導航的CSS文件，還沒有我自己重寫code來的快，讓我想起了寫
DIV+CSS中常見十大錯誤總結: 本文和大家重點討論一下DIV+CSS常見錯誤總結，為了說明與HTML網頁設計語言中的表格（tabl
CSS3網格布局模塊:網格布局實現網頁布局: 文章簡介：CSS3網格布局模塊的一個任務是幫助我們處理非常簡單和清晰的任何web-imposer（

DIV CSS 佈局教程網

相關文章