Javascript+Flash实现图片切换资源-CSDN文库

共7个文件

jpg：5个

swf：1个

htm：1个

Flash

图片切换

3星 · 超过75%的资源需积分: 10 141 浏览量 2009-09-10 09:52:15 上传评论收藏 54KB RAR 举报

JavaScript 和 Flash 是两种在网页开发中常用于创建动态效果的技术。在这个特定的场景中，"Javascript+Flash实现图片切换" 指的是利用这两种技术来创建一个类似新浪体育首页的图片轮播功能。这种功能可以让用户在网页上浏览一组图片，并自动按照设定的时间间隔进行切换，增强用户体验。 Flash 是一种矢量图形和多媒体软件平台，曾经广泛用于创建动画、交互式内容以及在网页上的媒体播放。在这个项目中，Flash 被用来制作图片切换的核心逻辑，包括图片的加载、展示和过渡效果。由于Flash具有良好的跨浏览器兼容性，特别是对于老版本的IE（Internet Explorer）浏览器，它能够提供稳定且一致的图片轮播体验。 JavaScript，另一方面，是一种轻量级的解释型编程语言，通常用于网页的客户端脚本。在这里，JavaScript 可能被用来处理用户交互，如初始化Flash组件、设置图片轮播时间、响应用户触发的事件（如点击按钮切换图片）。通过JavaScript与Flash的交互，可以实现在不刷新页面的情况下更新内容，提供更流畅的用户体验。具体实现过程中，开发者可能首先在HTML（如index.htm）文件中嵌入Flash对象，通过`<object>`或`<embed>`标签定义Flash的位置、大小及所需的参数。这些参数可能包括图片路径、切换时间等。JavaScript代码则会监听页面加载事件，当页面准备就绪时，调用Flash组件提供的API来设置和控制图片轮播。同时，"自带5副图片切换"意味着在项目中，初始至少有五张图片用于展示。这些图片可能存储在"images"目录下，每张图片都有一个唯一的文件名，以便在代码中引用。Flash组件会按照预设的顺序或者随机方式加载并显示这些图片。为了实现图片之间的平滑过渡，Flash可能采用了渐变、淡入淡出或其他动画效果。这些效果可以通过ActionScript（Flash的编程语言）编写，使得图片在切换时更为吸引人。 "Javascript+Flash实现图片切换"是一个结合了JavaScript交互性和Flash动画效果的网页开发案例。它通过JavaScript处理用户交互和控制Flash组件，使用Flash实现图片的动态切换和过渡动画，最终在各种浏览器上提供一致的图片轮播体验。尽管现代网页开发更多地倾向于使用HTML5的Canvas或CSS3来实现类似的特效，但对于支持老版浏览器的项目，这样的混合技术方案仍有其价值。

展开

资源推荐

资源详情

资源评论

收起资源包目录

Javascript+Flash实现图片切换.rar （7个子文件）

images

02.jpg 7KB

01.jpg 8KB

focus.swf 9KB

03.jpg 11KB

04.jpg 10KB

05.jpg 9KB

index.htm 4KB

      <html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
</head>
<body>
<table width="240" height="218" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="240" height="218">
    <script type="text/javascript">
      var focus_width=240;
      var focus_height=200;
      var text_height=18;
      var swf_height=focus_height+text_height;
      var text_margin="0|0";
      var border_style="1|0x000000|20";
      var text_align="left";
      var interval_time=2;
 
      var pics="images/01.jpg|images/02.jpg|images/03.jpg|images/04.jpg|images/05.jpg";
      var links="http://www.baidu.com|http://www.baidu.com|http://www.baidu.com|http://www.baidu.com|http://www.baidu.com";
      var texts="图片1|图片2|图片3|图片4|图片5";
 
      document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="'+focus_width+'" height="'+swf_height+'">');
      document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="images/focus.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
      document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
      document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'&textmargin='+text_margin+'&borderstyle='+border_style+'&text_align='+text_align+'&interval_time='+interval_time+'">');
      document.write('<embed src="images/focus.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#F0F0F0" width="'+focus_width+'" height="'+swf_height+'" FlashVars="' + 'pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'&textmargin='+text_margin+'&borderstyle='+border_style+'&text_align='+text_align+'&interval_time='+interval_time+ '">');
      document.write('</embed>');
      document.write('</object>');
    </script>
    </td>
  </tr>
</table>
</body>
</html>