js實現圖片輪播效果

時間 2021-08-12

標籤 javascript java app ide spa htm 圖片 get 源碼欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 圖片輪播 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="水月洞天工做室">
<META NAME="Keywords" CONTENT="圖片輪播">
<META NAME="Description" CONTENT="js實現圖片輪播">
</HEAD>javascript

<BODY>
<div id="c_flash"></div>
<script language="javascript">
linkarr = new Array();
picarr = new Array();
textarr = new Array();
var focus_width=359;   // 圖片的寬度
var focus_height=144; // 圖片的高度
var text_height=20; // 底部文字的高度
var pics = "";
var links = "";
var texts = "";
var swf_height = focus_height+text_height;   // 整個輪換效果的高度=圖片高度+底部文字高度
var defJpeg = "http://www.cnbeta.com/p_w_picpaths/index_37.jpg";

linkarr[1]="http://www.cnbeta.com/articles/73700.htm";picarr[1] ="../p_w_picpath/01.jpg";textarr[1]="專一的精神，是咱們的一向做風";
linkarr[2]="http://www.cnbeta.com/articles/73715.htm";picarr[2] ="../p_w_picpath/02.jpg";textarr[2]="咱們的用心，換來大家的放心";
linkarr[3]="http://www.cnbeta.com/articles/73734.htm";picarr[3] ="../p_w_picpath/03.jpg";textarr[3]="與大家共享榮譽，是咱們最大的驕傲";
linkarr[4]="http://www.cnbeta.com/articles/73473.htm";picarr[4] ="../p_w_picpath/04.jpg";textarr[4]="專業的技術，提供最舒心的服務";

for(i=1;i<picarr.length;i++){
   if(pics=="") pics = picarr[i];
   else pics += "|"+picarr[i];
}

for(i=1;i<linkarr.length;i++){
   if(links=="") links = linkarr[i];
   else links += "|"+linkarr[i];
}

for(i=1;i<textarr.length;i++){
   if(texts=="") texts = textarr[i];
   else texts += "|"+textarr[i];
}

document.write('<object type="application/x-shockwave-flash" data="../p_w_picpath/slide.swf" width="' + focus_width + '" height="' + swf_height + '">');
    document.write('<param name="movie" value="../p_w_picpath/slide.swf" />');
    document.write('<param name="allowScriptAcess" value="sameDomain" />');
    document.write('<param name="quality" value="best" />');
    document.write('<param name="bgcolor" value="#E5ECF4" />');
    document.write('<param name="scale" value="noScale" />');
    document.write('<param name="menu" value="false">');
    document.write('<param name="wmode" value="opaque" />');
    document.write('<param name="FlashVars" value="playerMode=embedded&pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" />');
    document.write('</object>');java

</script>
</BODY>
</HTML>
app

說明：實現圖片輪換效果的實際上是一個flash,就是那個../p_w_picpath/slide.swf,真想看看他的源碼,不知道他是怎麼讀取傳進去的參數的哦!!!
要注意的時候圖片和那個slide.swf必須在同一站點下,要否則就會顯示出錯了,好比上面的代碼改爲http://www.cnbeta.com/template/slide.swf後顯示就不正常了!!!
圖片只能使用JPG格式的，若是換成GIF格式的話則圖片顯示不出來！！！ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。