javascript實現的圖片簡單切換程式碼例項

antzone發表於2017-04-03
JavaScript

圖片切換功能很多都比較絢麗，當然有時候僅僅需要簡單的每隔指定時間更換一下圖片，下面就是一個這樣的程式碼。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#thediv{
  width:150px;
  height:100px;
  margin:0px auto;
}
</style>
<script type="text/javascript"> 
var theArray=new Array('圖片一', '圖片二', '圖片三', '圖片四');
var index=0;
function change(){ 
  var theimg=document.getElementById('theimg'); 
  if(s<theArray.length-1){ 
    index++; 
  } 
  else { 
    index=0; 
  } 
  theimg.setAttribute('src', theArray[index]); 
} 
function qiehuan(){ 
  setInterval(change,1000); 
} 
window.onload=function(){qiehuan();}
</script> 
</head> 
<body> 
<img src="預設圖片" id="theimg"/>
</body> 
</html>

以上程式碼並不能夠真正的執行，因為圖片的地址只是以文字進行簡單的替代，在實際應用中進行簡單的替換就可以了，這裡就不多介紹了，程式碼比較簡單，如果有任何問題，可以跟帖留言。

相關文章