在网页设计中 想让几张图片 像幻灯片放映 该如何做？
作者&投稿：纳婕 （若有异议请与网页底部的电邮联系）
以powerpoint 2013为例
1.分别编辑每张图片的动画
2.ctrl+鼠标左键依次选中四张图片
3.点击菜单栏“动画”“效果选项”右下方的下拉菜单，弹出以下对话框：
在“动画播放后”选择“播放动画后隐藏”。 确定~~~~
希望能够有帮助。
可以用flash做，当鼠标点击1.2.3.4.5时跳到该页面，若不点可以一张张顺序播放
用时间轴和层，隐藏和显示，或者用时间轴和直接的图像交换行为结合<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}
.loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}
.d2{width:100%;height:209px;overflow:hidden;}
.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}
.num_list span{display:inline-block;height:16px;padding-left:6px;}
img{border:0px;}
ul{display:none;}
.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}
.b2{color:#FFCC33;background-color:#FF6633;}
</style>
<script language="javascript" type="text/javascript">
/*
power by: http://www.wxwdesign.cn
*/
//主函数
var s=function(){
var interv=2000; //切换间隔时间
var interv2=10; //切换速速
var opac1=80; //文字背景的透明度
var source="fade_focus" //焦点轮换图片容器的id名称
//获取对象
function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}
function getid(id){return document.getElementById(id)};
var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);}
//控制图层透明度
function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}
//控制焦点按钮
function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}
title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);
//渐显
var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}
//渐隐
var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}
//滚动文字
var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0 && t>3){timer3=setTimeout(scrolltxt,interv2)}else if(num>0 && t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};
fadeon();
}
//初始化
window.onload=s;
</script>
<title>Javascript图片幻灯效果——wxwdesign.cn</title>
</head>
<body>
<div id="fade_focus">
<div class="loading">Loading...<br /><img src="/UploadPic/2009-3/200932411630437.gif" width="100" height="100" /></div>
<ul>
<li><a href="http://www.wxwdesign.cn" target="_blank"><img src="/UploadPic/2009-3/200932411630872.jpg" width="443" height="209" alt="展示图片1" /></a></li>
<li><a href="http://www.wxwdesign.cn" target="_blank"><img src="/UploadPic/2009-3/200932411631990.jpg" width="443" height="209" alt="展示图片2" /></a></li>
<li><a href="http://www.wxwdesign.cn" target="_blank"><img src="/UploadPic/2009-3/200932411631905.jpg" width="443" height="209" alt="展示图片3" /></a></li>
<li><a href="http://www.wxwdesign.cn" target="_blank"><img src="/UploadPic/2009-3/200932411631473.jpg" width="443" height="209" alt="展示图片4" /></a></li>
</ul>
</div>
</body>
</html>
你修改代码中的图片来源就好了。
直接上百度搜索焦点图特效就可以了
给你推荐个软件，叫WebSite X5 Evolution，可以自动生成网页源码，你可以用那个实现
祁常能全： http://www.irishc.com 网站下面的那个幻灯片吗 这个网站下面的幻灯片的代码是代码说明: 图片地址,就是你图片或者文章配图的图片地址. 文章地址,如果图片地址1你用的是这一篇文章的图片,那就把这篇文章的地址粘贴在这里. 文章名字,就是这篇文章的名字. width=＂180＂ height=＂200＂ 是幻灯片的尺寸,可以自行调节. bgcolor=＂#FDD248＂ 是背景颜色,可以参考我的文章里的颜色设置. textheight=20 是文字区域高度,可以自行调节. 不要陋掉哦
宜都市13769621341： 网页中图片像幻灯片一样播放是怎么做的 - ？
祁常能全： 可以用flash做,当鼠标点击1.2.3.4.5时跳到该页面,若不点可以一张张顺序播放
宜都市13769621341： 大神,问一下用Dreamweaver8 制作个人网页时怎样让图片自动播放?像幻灯片一样?？
祁常能全： 用dw的电子相册就行
宜都市13769621341： 如何在网页上创建图像幻灯片 - ？
祁常能全： 操作很简单,具体步骤: 1.单击”图形”连接到相应的页面 先画个”图形”,选种,右键→动作设置→超级连接到→选择你需要的页面(页面中当然是你的文字信息了) 2.返回”目录” 在文字页面中也画个”图形”,选种,右键→动作设置→...
宜都市13769621341： 使用dreamweaver cs5如何制作像幻灯片一样播放的图片?cs5中的时间轴已经取消,请高手指点! - ？
祁常能全： 详细的代码在很多js源码下载站点就可以下载到,你只要找网页幻灯片或者网页轮播效果代码,能在百度上找到很多.还可以下载到源文件.即便使用原来旧版本的dreamweaver的时间轴,也难以做出现在网页录播图片的效果,这个时间轴实际上就是在dreamweaver内置的一个js功能,不过代码已经过时了,所以被新版本取消了.这样的效果只能是编写js程序来制作了,不过既然网上有人家编写好的程序,那么拿过来用,直接粘贴在网页上就可以了.
宜都市13769621341： 网页制作 多张图片整合在一起 - ？
祁常能全： 这个就是图片幻灯,有些人是通过FALSH实现,有些人可以通过JS实现,总之是要用代码控制的,而且那个代码比较长,这里贴不下,你要是不懂代码的话估计也有困难.你去网上找找吧,找不到代码的话我这里有一个,我QQ: 10 3034 9093
宜都市13769621341： 我想让几张图片轮流切换展示在网页,怎么做?ps可以做吗?或者ppt做好的幻灯片怎么拿来用在网页里？
祁常能全： 你所说的叫作焦点图,也叫轮显图,去懒人图库下载个代码,加到网站上,然后把作好的图片替换一下就可以了.
宜都市13769621341： 请教 网页制作 图片幻灯片效果制作方法 - ？
祁常能全： 搜“焦点图片代码”可以找出一堆,一般是JS特效,方法多种多样,你自己选吧,要学会使用一些效果代码
宜都市13769621341： html网页设计中百度图片幻灯片那种怎么做? - ？
祁常能全： 你老师,是将图片先上传到服务器?还是调用本地图片??你试试上传图片,然后调用html链接试试
宜都市13769621341： 网页设计中,下图1234切换图片的效果如何实现? - ？
祁常能全： http://www.zztuku.com/JS/Focus/ http://www.zztuku.com/JS/list_8_5.html 戳这里 很多幻灯样式 一定有你需要的 将里面的图片换成你的图片就可以了,文件名要一样(如果不一样你需要修改网页里面的代码)
