×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 17010|回复: 44

请问:如何在网页中制作幻灯片效果

[复制链接]
发表于 2007-9-21 08:21:08 | 显示全部楼层 |阅读模式
又来了,#bbs.jcwcn.com@ 请教大家如何在网页中制作和添加幻灯片的效果呢?jcwcn.com@
发表于 2007-9-21 09:29:56 | 显示全部楼层
这个就是看要那一种效果的幻灯片了,通常都是用js来做,现在比较流行js+flash的这种模式
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-9-21 09:44:26 | 显示全部楼层

回复 #2 寅生 的帖子

加入了FLASH有什么区别么?请各举个例子看看好么?谢谢(^#@%^
回复 支持 反对

使用道具 举报

发表于 2007-9-21 19:40:03 | 显示全部楼层
先看第一个js+flash的,实际是就是js中存储数据,淡然这个数据可以是从数据库里调用,生成的。flash负责实现幻灯播放
  1. <a target=_self href="javascript:goUrl()">
  2. <span>
  3. <script type="text/javascript">
  4. imgUrl1="http://img.jcwcn.com/attachment/forum/month_0709/20070913_4ee8cb60b22fa9dd0279oTIV6fmTgIXw.jpg";
  5. imgtext1="用Photoshop进行美术创作的简单技"
  6. imgLink1=escape("http://www.jcwcn.com/html/PhotoShopImageReady/19_07_11_206.htm");
  7. imgUrl2="http://img.jcwcn.com/attachment/forum/month_0709/20070913_bcfb127543dc1d08802d9KP0DGXyr9jT.jpg";
  8. imgtext2="Photoshop合成教程:打造神秘之眼"
  9. imgLink2=escape("http://www.jcwcn.com/html/PhotoShopImageReady/19_36_05_750.htm");
  10. imgUrl3="http://img.jcwcn.com/attachment/forum/month_0709/20070913_cbc2b6daadb1cbe3e702j0H7isUi1QeX.jpg";
  11. imgtext3="Photoshop教程:照片转逼真手绘效"
  12. imgLink3=escape("http://www.jcwcn.com/html/PhotoShopImageReady/18_44_26_734.htm");
  13. imgUrl4="http://img.jcwcn.com/attachment/forum/month_0709/20070913_ae854ce1c7892251fb03pRi4Ha91Ew7i.jpg";
  14. imgtext4="Photoshop教程:抽出滤镜运用实例"
  15. imgLink4=escape("http://www.jcwcn.com/html/PhotoShopImageReady/10_57_01_754.htm");
  16. imgUrl5="http://img.jcwcn.com/attachment/forum/month_0709/20070910_51df0edb78224d6370612fzMNYqX0tej.jpg";
  17. imgtext5="3ds MAX实例教程:室内渲染全过程"
  18. imgLink5=escape("http://www.jcwcn.com/html/3dsmax/23_55_48_619.htm");

  19. var focus_width=280
  20. var focus_height=158
  21. var text_height=18
  22. var swf_height = focus_height+text_height

  23. var pics=imgUrl1+"|"+imgUrl2+"|"+imgUrl3+"|"+imgUrl4+"|"+imgUrl5
  24. var links=imgLink1+"|"+imgLink2+"|"+imgLink3+"|"+imgLink4+"|"+imgLink5
  25. var texts=imgtext1+"|"+imgtext2+"|"+imgtext3+"|"+imgtext4+"|"+imgtext5

  26. 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="'+ focus_width +'" height="'+ swf_height +'">');
  27. document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://www.jcwcn.com/swf/focus.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
  28. document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
  29. document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
  30. document.write('<embed src="pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
  31. document.write('</object>');
  32. </script>
  33. </span></a>
复制代码

[ 本帖最后由 寅生 于 2008-8-2 07:18 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-9-21 20:06:54 | 显示全部楼层
这个是用js直接实现幻灯,其实就是过一段时间自动换一幅图像
  1. <SCRIPT language="">                     
  2. var widths=290;   /*显示高度*/                  
  3. var heights=230;  /*显示宽度*/                  
  4. var counts=6;              
  5. img1=new Image ();img1.src='http://img.jcwcn.com/attachment/forum/month_0709/20070913_4ee8cb60b22fa9dd0279oTIV6fmTgIXw.jpg';
  6. img2=new Image ();img2.src='http://img.jcwcn.com/attachment/forum/month_0709/20070913_bcfb127543dc1d08802d9KP0DGXyr9jT.jpg';
  7. img3=new Image ();img3.src='http://img.jcwcn.com/attachment/forum/month_0709/20070913_cbc2b6daadb1cbe3e702j0H7isUi1QeX.jpg';
  8. img4=new Image ();img4.src='http://img.jcwcn.com/attachment/forum/month_0709/20070913_ae854ce1c7892251fb03pRi4Ha91Ew7i.jpg';
  9. img5=new Image ();img5.src='http://img.jcwcn.com/attachment/forum/month_0709/20070910_51df0edb78224d6370612fzMNYqX0tej.jpg';
  10. img6=new Image ();img6.src='http://img.jcwcn.com/attachment/forum/month_0709/20070907_ba0162f23d630dfd9ca1TesqosYf60X6.jpg';        
  11. url1=new Image ();url1.src='http://www.jcwcn.com/html/PhotoShopImageReady/19_07_11_206.htm';
  12. url2=new Image ();url2.src='http://www.jcwcn.com/html/PhotoShopImageReady/19_36_05_750.htm';
  13. url3=new Image ();url3.src='http://www.jcwcn.com/html/PhotoShopImageReady/18_44_26_734.htm';  
  14. url4=new Image ();url4.src='http://www.jcwcn.com/html/PhotoShopImageReady/10_57_01_754.htm';
  15. url5=new Image ();url5.src='http://www.jcwcn.com/html/3dsmax/23_55_48_619.htm';                                         
  16. url6=new Image ();url6.src='http://www.jcwcn.com/html/PhotoShopImageReady/15_09_28_8.htm';      
  17. /* 建议将这块放置于JS中 下面的部分几乎是不需要任何改动*/
  18. var nn=1;
  19. var key=0;
  20. function change_img()
  21. {if(key==0){key=1;}
  22. else if(document.all)
  23. {document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}
  24. eval('document.getElementById("pic").src=img'+nn+'.src');
  25. eval('document.getElementById("url").href=url'+nn+'.src');
  26. for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}
  27. document.getElementById("xxjdjj"+nn).className='bxx';
  28. nn++;if(nn>counts){nn=1;}
  29. tt=setTimeout('change_img()',4000);}
  30. function changeimg(n){nn=n;window.clearInterval(tt);change_img();}
  31. document.write('<style>');
  32. document.write('.axx{padding:0px 7px 3px;*padding:1px 7px;border-left:#cccccc 1px solid;}');
  33. document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
  34. document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
  35. document.write('.bxx{padding:0px 7px 3px;*padding:1px 7px;border-left:#cccccc 1px solid;}');
  36. document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
  37. document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
  38. document.write('</style>');
  39. document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');
  40. document.write('<div><a id="url"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');
  41. document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);-moz-opacity:0.8; opacity:0.8;background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">');
  42. for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}
  43. document.write('</div></div>');
  44. change_img();
  45. </SCRIPT>
复制代码

[ 本帖最后由 寅生 于 2008-8-2 07:19 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-9-23 00:49:35 | 显示全部楼层
用层应该可以做吧
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-9-24 08:44:16 | 显示全部楼层

回复 #5 寅生 的帖子

img1=new Image ();img1.src='http://img.jcwcn.com/attachment/forum/month_0709/20070913_4ee8cb60b22fa9dd0279oTIV6fmTgIXw.jpg'请问有下划线的这部分代码必须是绝对路径么,可不可以是根目录下的图片(例如:d:\网站\cp\1.jpg)?
回复 支持 反对

使用道具 举报

发表于 2007-9-24 08:54:13 | 显示全部楼层

回复 #7 宁静悠长 的帖子

目录不能
例如:d:\网站\cp\1.jpg
这样来写的,这样计算机的物理路径。可以用相对于你网站根目录的相对路径!

如:/cp/1.jpg
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-9-24 09:17:13 | 显示全部楼层

回复 #8 寅生 的帖子

img1=new Image ();img1.src='/cp/1.jpg';这样改对不对,运行后,怎么又不出图片呢?
回复 支持 反对

使用道具 举报

发表于 2007-9-24 10:28:48 | 显示全部楼层
我是在打个比喻,相对于这个页面的路径
/cp/1.jpg
这个对吗?

如果你不明白相对目录的写法,可以把网页和你图片的目录结构列出来,我帮你看看
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-9-24 10:48:09 | 显示全部楼层

回复 #10 寅生 的帖子

站点--文件夹cp--jpg图片
      --文件夹image:
      --文件夹pdf
      --文件夹templats--mode.dwt
      --index.htm
      --cpjj.htm
      --cpzs.htm
      --zlxz.htm
      --cpyc.htm
      --lxwm.htm
      --css.css
是不是这个
回复 支持 反对

使用道具 举报

发表于 2007-9-24 11:23:17 | 显示全部楼层
/cp/1.jpg
cp/1.jpg

都是正确的
回复 支持 反对

使用道具 举报

发表于 2007-9-24 21:48:44 | 显示全部楼层
请问一下版主-寅生在4楼中运行代码后是5个图片切换,如果想改成3个图片切换或者更多个图片切换该怎么做啊?谢谢请告诉我一下,我对网页编辑还是初学阶段。谢谢!
回复 支持 反对

使用道具 举报

发表于 2007-9-24 23:37:40 | 显示全部楼层
你把数组里面 img1.src之类的后面不需要的去掉就可以了

比如写到img3.src后面就不要了
回复 支持 反对

使用道具 举报

发表于 2007-9-25 09:36:40 | 显示全部楼层
你好版主,版主,我说的是4楼中的代码,不是说5楼的!谢谢!请告知!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [免费注册]

本版积分规则