2个js实现图片轮播效果（用）

第一个（使用）

不过要注意在web.config中将该location的位置的访问权限设为allow user="*",设置了deny user="?"或"*"将导致无法看到图片，今天费了一番功夫才发现之前设置的这个问题，造成管理员在freetexbox中上传图片时只看到有图片文件，但是看不到文件夹中的图片内容，修改后成功过通过）：

<div id="c_left" style=" left:0px; float:left; border:5px; border-color:Gray">

                               <SCRIPT language=JavaScript>
     
      </SCRIPT>

                               </div>

第二个(未用，因为会随页面缩放比例而丢失画面和文字)：

<!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>

<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/images/index_37.jpg";

linkarr[1]="http://www.cnbeta.com/articles/73700.htm";picarr[1] ="../image/01.jpg";textarr[1]="专注的精神，是我们的一贯作风";
linkarr[2]="http://www.cnbeta.com/articles/73715.htm";picarr[2] ="../image/02.jpg";textarr[2]="我们的用心，换来你们的放心";
linkarr[3]="http://www.cnbeta.com/articles/73734.htm";picarr[3] ="../image/03.jpg";textarr[3]="与你们共享荣誉，是我们最大的骄傲";
linkarr[4]="http://www.cnbeta.com/articles/73473.htm";picarr[4] ="../image/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="../image/slide.swf" width="' + focus_width + '" height="' + swf_height + '">');
    document.write('<param name="movie" value="../image/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>');

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

说明：实现图片轮换效果的其实是一个flash,就是那个../image/slide.swf,真想看看他的源码,不知道他是怎么读取传进去的参数的哦!!!
要注意的时候图片和那个slide.swf必须在同一站点下（至于slide.swf，大家使用下载工具到http://www.cnbeta.com/template/slide.swf下载呗）,要不然就会显示出错了,比如上面的代码改成http://www.cnbeta.com/template/slide.swf后显示就不正常了（例如标题文字时有时无）!!!
图片只能使用JPG格式的，如果换成GIF格式的话则图片显示不出来！！！

秒客网

2个js实现图片轮播效果（用）

相关文章