如何在DREAMWEAVER中做出图片切换效果

也就是说使一张图片一段时间后变成另一张,再过一段时间后又有第三张切换

1、准备一组图片,最好大小一致,文件的命名相似,如:pic1.jpg、pic2.jpg、pic3.jpg;

2、在网页中插入一个2×3的表格,表格的宽度与你的图片宽度一致;

3、把表格的第一行的叁个单元格合并,并在其中插入第一张图片,把图片命名为“imag1”,这一点很重要,这是以后替换图片的标识;

4、在表格的第二行的左右两个单元格中分别插入两个按钮,一个这“下一张”,一个为“上一张”。在“下一张”按钮的代码中加上代码:onclick="img(1)",在“下一张”按钮的代码中加上代码:onclick="img(2)"。其作用是当相应的按钮按下时执行相应的函数实现切换图片的功能。在表格第二行中间那个单元格中写上“第一张”,并在该段文字的前后加上一个<span>标记,在其中加上代码:id="picnum",这样做的目的是给这段文字加一个标识,以便动态替换。

5、在网页代码的<head>与</head>之间插入以下代码:
<Script LANGUAGE="JavaScript">
<!--
var num=1 //设置图片数初始值
var nummax=3 //图片数,可根据实际数更改
function img(sta)
{
obj=eval("img1");
objnum=eval("picnum");
if (obj.filters.item(0).Transition==23) // 这部分语句是用于改变切换样式,在23种样式中循环。
obj.filters.item(0).Transition=1;
else
obj.filters.item(0).transition++;
obj.filters.item(0).Apply();
if (sta==1) //以下部分用于切换图片和更新当前显示的图片号
num=num+1
else num=num-1
if (num>nummax) num=1
if (num<1) num=nummax
obj.src="http://fym888.nease.net/image/cssp" + num + ".jpg";//写图片地址,根据实际改写
obj.filters.item(0).Play();//显示切换图片时的滤镜效果
objnum.innerText="第"+num+"张";//更新图片数
}
//-->
</SCRIPT>
以上是实现图片切换的主要函数,除标明可以的外可以不必更改。

5、表格、图片及按钮部分的代码如下:

<table width="200" border="1" align="left" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3" scope="col"><img src="http;//fym888.nease.net/image/cssp1.jpg" name="img1" width="200" height="134" id="img1" style="filter:revealTrans(Transition=1,Duration=1.5)"></th>
</tr>
<tr>
<td width="57"><input name="Submit" type="button" value="下一张" onclick="img(1)"></td>
<td width="82"><div align="center"><span id="picnum">第1张</span></div></td>
<td width="57"><div align="right">
<input type="submit" name="Submit" value="上一张" onclick="img(2)">
</div></td>
</tr>
</table>

上面的红字部分可以根据实际情况改写
温馨提示:内容为网友见解,仅供参考
第1个回答  2006-10-04
dw只是网页设计软件

你的问题涉及到了编程 当然 dw的编程引擎也很棒!

可以通过 VBS 或者 JS 实现 代码如上 百度下很多的

现在比较流行的方法是通过 vbs的组件调用库

还有就是 动态生成

以上都涉及到了编程

简单的办法 是用 gif图编辑软件 或者flash编辑软件实现即可

比如 firework 和flash
第2个回答  2006-10-02
这个先用flash做好,然后放入DREAMWEAVER

如何在dreamweaver里制作照片滚动
首先,在一个表格中插入一列三行的表格。接着,在第一个表格中,点击“插图”菜单下的“媒体”,选择“图像查看器”。输入图像查看器的名称,并调整其大小。点击“播放”按钮,确认当前状态为空无图片。插入图片。选中图像查看器,点击“图像地址”栏,打开编辑数组窗口,分别插入图片,可以通过点击“+”...

如何在DREAMWEAVER中做出图片切换效果
在“下一张”按钮的代码中加上代码:onclick="img(1)",在“下一张”按钮的代码中加上代码:onclick="img(2)"。其作用是当相应的按钮按下时执行相应的函数实现切换图片的功能。在表格第二行中间那个单元格中写上“第一张”,并在该段文字的前后加上一个标记,在其中加上代码:id="picnum",...

Dreamweaver 图片切换问题
用dreamwever 就可以实现,先做一个层在边上放小图片,然后再重叠放和小图片数目一样的层放大图片,注意放大图片的层一定要叠放,不然没有这种效果,然后你点其中的一个小图片,在动作面板里添加行为,隐藏显示层,在里面设置层的果显示的隐藏就行,注意的是:除了要显示的层外,其它的都要设为隐藏,当然不设...

dreamweaver制制图片切换
\/*点击左右span图片切换*\/ \/*点击左右span时li切换*\/ spanL.onclick=function(){ if (num<1) { num=arrImg.length-1; fn(num); fnLi(num); }else{ num--; fnLi(num); fn(num); } } spanR.onclick=function(){ if (num==arrImg.length-...

dreamweaver 做个3张图片不停的切换的效果 怎么弄? 初学者求指教_百度...
第一,做一个GIF图片,3张切换,然后插入到网页里。第二,用flash 来实现,然后插入到网页里。第三,就是用下面的 JS 代码来实现,我加了注释,希望你能看得懂:<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional....

如何在Dreamweaver里实现图片的上一页下一页切换
就是点击上一页或者下一页的按钮进行图片的切换效果,不需要缩略图。就是这样的上下翻页的按钮

用dreamweaver怎么实现图片自动换
试试这个图片切换 有12345数字一起切换 鼠标点一下数字会变换到另一张图片,不点就会自动换 里面有教程和源码 参考资料:http:\/\/www.blueidea.com\/common\/shoutbox\/redir.asp?3=a&id=10895

怎么用Dreamweaver写一个代码实现图片的自动切换
如果只能用html来做切换图片,那只能用<marquees><\/marquees>图片滚动代码来做,如果用JS+flash图片乱转就好办了,就是平时网页上的图片切换效果。flash也可以做图片的自动切换,几秒钟切换一张图片。

dreamweaver如何实现下面这个轮番播放图片的功能功能,不用代码直接操作...
1、轮播效果一般通过javascript的settimeout函数定时运行图片切换,用dw可以实现 2、不写代码法也是行的,在你的浏览器上按文件->另存为->网页\/全部->点击保存 3、dw打开保存下来的htm文件,在设计版面中点击该轮播处,转至效果代码,然后把代码复制下来,然后用通配符,搜索图片格式(*.jpg,*.bmp或*...

如何在Dreamweaver里实现图片的上一页下一页切换
<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">简单的幻灯片效果var picArr=new Array("1.jpg","2.jpg","3.jpg");var index=0;function next(){ index++; if(index==picArr.length){ inde...

相似回答