javascript实现首页图片自动切换【HTML/JSP】

来源:互联网 发布:苏州大学网络认证服务 编辑:程序博客网 时间:2024/06/05 11:09

       现在访问网站主页的时候,吸引我们眼球的已经不是那些古板的文字 排版,而是华丽且实用的动图效果,如下图所示:

     

        通过动图,我们可以看到本站的最新活动,最新新闻等等,这些图片往往几秒钟切换一次,显示更新,点击图片即可看到详细内容。

        我们在做网页设计的时候,也可以拿来借鉴。


         下面介绍一下 效果的实现 :javascript 。我们可以将这些类似万能钥匙的代码 填充到你想要展示的位置。

        

<script language='javascript' type="text/javascript">            linkarr = new Array();            picarr = new Array();            textarr = new Array();            var swf_width=760;            var swf_height=311;            var files = "images/pic.jpg|images/pic1.jpg|images/pic2.jpg|images/pic3.jpg";            var links = "#|#|#|#";            var texts = "";            for(i=1;i<picarr.length;i++){              if(files=="") files = picarr[i];              else files += "|"+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 classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');            document.write('<param name="movie" value="images/indexpic.swf"><param name="quality" value="high">');            document.write('<param name="menu" value="false"><param name=wmode value="opaque">');            document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">');            document.write('<embed src="images/indexpic.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');          </script>

原创粉丝点击