日期:2014-05-16  浏览次数:23078 次

请问现今网站上面出现的滚动图片是怎样做的? - Web 开发 / Ajax
请问现今网站上面普遍出现的滚动图片,几张图会不断变化,有1、2、3、4显示,点击就可以打开相应网页这个效果是怎样做出来的?

------解决方案--------------------
方法1,使用Flash


<div id="c_flash">
<script language='javascript'>
linkarr = new Array();
picarr = new Array();
textarr = new Array();
var focus_width=300;
var focus_height=200;
var text_height=16;
var pics = "";
var links = "";
var texts = "";
var swf_height = focus_height+text_height;
var defJpeg = "/user/admin/20110927113321_new.jpg";
 
linkarr[1]="http://www.xcwljy.cn/showNews.py?newsId=327";
picarr[1] ="http://i1.sinaimg.cn/ty/732/2009/0701/U687P6T732D1F20664DT20111003162255.jpg";
textarr[1]="中网-郑洁决胜盘连胜五局逆转晋级次轮";
linkarr[2]="http://www.xcwljy.cn/showNews.py?newsId=326";
picarr[2] ="http://i2.sinaimg.cn/ty/732/2009/0701/U687P6T732D1F20670DT20111003162255.jpg";
textarr[2]="意甲-铁腰两球尤文2-0擒10人米兰";
for(i=1;i<picarr.length;i++){
if(pics=="") pics = picarr[i];
else pics += "|"+picarr[i];
}
 
for(i=1;i<linkarr.length;i++){
if(links=="") links = linkarr[i];
else links += "|"+linkarr[i];
}
 
for(i=1;i<textarr.length;i++){
if(texts=="") texts = textarr[i];
else texts += "|"+textarr[i];
}
  
 
document.write('<object type="application/x-shockwave-flash" data="http://www.xcwljy.cn/images/slide.swf" width="' + focus_width + '" height="' + swf_height + '">');
document.write('<param name="movie" value="http://www.xcwljy.cn/images/slide.swf" />');
document.write('<param name="allowScriptAcess" value="always" />');
document.write('<param name="quality" value="best" />');
document.write('<param name="bgcolor" value="#E5ECF4" />');
document.write('<param name="scale" value="noScale" />');
document.write('<param name="menu" value="false">');
document.write('<param name="wmode" value="opaque" />');
document.write('<param name="FlashVars" value="playerMode=embedded&pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" />');
document.write('</object>');
</script>
</div>


方法2:使用js
方法3:使用控件
http://dotnet.aspx.cc/CodeLab/Default.aspx
------解决方案--------------------
参考
javascript图片翻页切换效果
javascript图片卷帘/淡入淡出效果

效果
http://www.code-design.cn/eg/photo-turn-page/
http://www.code-design.cn/eg/photo-roll-up/