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

最新推荐文章于 2022-10-27 13:48:37 发布

齐岳

最新推荐文章于 2022-10-27 13:48:37 发布

阅读量5.3k

点赞数 3

分类专栏： web其他文章标签： JavaScript 图片 web html

本文链接：https://blog.csdn.net/qiyuexuelang/article/details/8827375

版权

web其他专栏收录该内容

37 篇文章 1 订阅

订阅专栏

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

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

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

下面介绍一下效果的实现：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>