js利用object標籤顯示動態圖片
阿新 • • 發佈：2019-01-22
<BODY > <script type="text/javascript" language="javascript"> var fImgs = new Array(); fImgs[0] = {title:'第一張',img:'stu_1.gif',href:'#'};//圖片的url，可更換 fImgs[1] = {title:'第二張',img:'stu_2.gif',href:'#'}; imagePlay(); var showImageIndex = -1; var imageTimer; function showImage(imageIndex) { var flash_img_div = document.getElementById("flash_img"); var flash_title = document.getElementById("img_title"); if(imageIndex>fImgs.length-1){ imageIndex = 0; } if(!fImgs[imageIndex] || imageIndex==showImageIndex) return false; var imgId = "__fImg"+imageIndex; for(i=0; i<flash_img_div.childNodes.length; i++){ flash_img_div.childNodes[i].style.display = "none"; } if( document.getElementById(imgId) ){ var imga = document.getElementById(imgId); imga.style.display = "block"; if(imga.tagName=="OBJECT"){ imga.rewind(); imga.Play(); } }else{ var pos = fImgs[imageIndex].img.lastIndexOf("."); if( fImgs[imageIndex].img.substr(pos+1).substr(0,3).toLowerCase()=="swf" ){ flash_img_div.innerHTML += '/ <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="320" height="240" id="'+imgId+'">/ <param name="movie" value="'+fImgs[imageIndex].img+'" />/ <param name="quality" value="high" />/ <embed src="'+fImgs[imageIndex].img+'" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="320" height="240"></embed>/ </object>'; }else{ var img = new Image(); img.border = "0"; img.src = fImgs[imageIndex].img; img.width = "290"; img.height = "186"; var a = document.createElement("a"); a.href = fImgs[imageIndex].href; a.target = "_blank"; a.id = imgId; a.appendChild(img); flash_img_div.appendChild(a); } } img_title.innerHTML = fImgs[imageIndex].title; showImageIndex = imageIndex; return true; } function imagePlay() { if(imageTimer) return; if(showImageIndex>=fImgs.length-1){ showImageIndex = -1; } showImage(showImageIndex+1); imageTimer = setInterval(function(){ var stat = showImage(showImageIndex+1); if(!stat){ stop(); } },1000); } function stop(){ clearInterval(imageTimer); imageTimer = null; }
//下一張圖片，可自己新增呼叫控制元件
function showNextImage(){
showImage(showImageIndex+1);
}//上一張圖片，可自己新增呼叫控制元件 function showPrevImage(){ showImage(showImageIndex-1); } </script> <table style="width:655px;" cellspacing="0" cellpadding="0" align="center"> <tr> <td > <table style="width: 645px" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="height: 26px;" align="left"> 圖片 </td> </tr> </table> </td> </tr> <tr> <td> <table style="width:645px; height:240px" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="width:300px; " align="center"> <!--flash幻燈展示開始--> <div id="flash_show" style="width: 294px; height: 230px; background-color: Silver;"> <div id="flash_img" style="width: 280px; height: 210px; vertical-align: middle; text-align: center"> </div> <span id="img_title"></span> </div> </td> </tr> </table> </BODY>