怎样在 Dreamweaver 里实现 图片轮播的效果~!

发布网友 发布时间：2022-04-22 22:01

我来回答

共3个回答

热心网友 时间：2022-04-06 12:50

2012-02-07 23:29时光昊韵| 六级在代码里面添加特效代码。第一种格式<li style="DISPLAY: block"><A href="图片地址" target=_blank><img alt="" src="图片地址"></A> <li style="DISPLAY: block"><A href="图片地址" target=_blank><img alt="" src="图片地址."></A> <li style="DISPLAY: block"><图片地址" target=_blank><img alt="" src="图片地址"></A> <li style="DISPLAY: block"><A href="图片地址" target=_blank><img alt="" src="图片地址"></A> <li style="DISPLAY: block"><A href="图片地址" target=_blank><img alt="" src="图片地址"></A></li></ul><ul class=lst-trigger><li style="BACKGROUND: #c00">1 <li class=current>2 <li>3<li>4<li>5</li></ul></DIV><图片地址"> 第二中，添加下面的代码（属于简单的）：<td rowSpan=7（自己可改次数） width=426（自己可修改）><IMG style="DISPLAY: block" id=pic3 src="<td rowSpan=7 width=426><IMG style="DISPLAY: block" id=pic3 src="图片地址"> <IMG style="DISPLAY: none" id=pic1 src="image/class1-3.jpg"> <IMG style="DISPLAY: none" id=pic2 src="image/class1-1.jpg"> <IMG style="DISPLAY: none" id=pic4 src="image/class1-4.jpg"> <IMG style="DISPLAY: none" id=pic5 src="image/class1-5.jpg"></td> 这里面是图片地址是举个例子的：src="image/class1-5.jpg" （引号之间的）根据自己图片的地址加以修改就可以。说白了就是在图片的前后加上需要的特效代码就好，让图片滚动的代码就是：<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"> <img border="0" src=" http://要滚动的图片地址1"> <img border="0" src=" http://要滚动的图片地址2"> </marquee> 这是最基础的代码。还有一种就是特效了 <ul> <li id="h1"><a href="javascript:void(0);"><span>1</span></a></li> <li id="h2"><a href="javascript:void(0);"><span>2</span></a></li> <li id="h3"><a href="javascript:void(0);"><span>3</span></a></li> <li id="h4"><a href="javascript:void(0);"><span>4</span></a></li> <li id="h5"><a href="javascript:void(0);"><span>5</span></a></li> </ul> <div id="h1_body"></div> <div id="h2_body"></div> <div id="h3_body"></div> <div id="h4_body"></div> <div id="h5_body"></div> </div>js代码:var p_idx=0;function Photo(path,title,url){ this.Path=path; this.Title=title; this.URL=url;} var photos=[new Photo('SpeakerPhoto/123.jpg','Liu Changchun',213.aspx'),""];//图片用，分割$(function(){ GetPhoto(0,4,$("#h1_body")); GetPhoto(4,4,$("#h2_body")); GetPhoto(8,4,$("#h3_body")); GetPhoto(12,4,$("#h4_body")); GetPhoto(16,2,$("#h5_body"));});function GetPhoto(inx,num,box){ for(var i=0;i<num;i++) { $(box).append('<a href="'+photos[inx].URL+'"><img src="'+photos[inx].Path+'" title="'+photos[inx].Title+'" /></a>'); inx++; }}function GetSinglePhoto(inx){ document.write('<img src="'+photos[inx].Path+'" title="'+photos[inx].Title+'" />');}不知道你需要哪一种？

参考资料：百度知道

热心网友 时间：2022-04-06 14:08

1、简单的实现图片轮播效果（图片修改为真实路径）
<marquee direction=left behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffffff height=300 width=30% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()>
<img src="../Pictures/190725bxe6si20p66zpzpj.jpg" width="200" height="200" />
<img src="../Pictures/190725bxe6si20p66zpzpj.jpg" width="200" height="200" />
</marquee>
2、像一般网站上的 banner 轮播效果，可以直接去CV代码修改来用

热心网友 时间：2022-04-06 15:42

<script>
var widths=1200; //图片宽
var heights=428;//高
var counts=4;//图片数量
img1=new Image ();img1.src='pic/1.png'; //图片的位置
img2=new Image ();img2.src='pic/2.png';
img3=new Image ();img3.src='pic/3.png';
img4=new Image ();img4.src='pic/4.png';
url1=new Image ();url1.src='http://www.51zxw.net';//图片链接地址
url2=new Image ();url2.src='http://www.51zxw.net';
url3=new Image ();url3.src='http://www.51zxw.net';
url4=new Image ();url4.src='http://www.51zxw.net';
var nn=1;
var key=0;
function change_img()
{if(key==0){key=1;}
else if(document.all)
{document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(ration=2);}
eval('document.getElementById("pic").src=img'+nn+'.src');
eval('document.getElementById("url").href=url'+nn+'.src');
for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}
document.getElementById("xxjdjj"+nn).className='bxx';
nn++;if(nn>counts){nn=1;}
tt=setTimeout('change_img()',4000);} //图片过渡时间长度
function changeimg(n){nn=n;window.clearInterval(tt);change_img();}
document.write('<style>');
document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('</style>');
document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');
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>');
document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">');
for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}
document.write('</div></div>');
change_img();
</script>