注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

邰增涛博客

www.xazcwl.com -- 爱生活,爱技术,将web编程进行到底!!!

 
 
 

日志

 
 
关于我

西安增创网络科技有限公司,专注网站建设、手机网站、商城网站、微网站开发、小程序开发、APP开发!!!

焦点图推荐(图片轮显)  

2010-05-19 10:09:18|  分类: 网站开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
很多网站都会用到焦点图,可以用纯JS实现,但不会做出flash的那种很绚效果。今天我推荐一款。
简单说明:
1. 图片数量可控,可以设置多张图片
2. 页面有多个相同效果不会互相冲突
3. 最下面的文本说明可控,var text_height=20;  如果设置成0 便不会显示文本说明。
4. 如果焦点不大的话可随便设置值,如果焦图尺寸比较大的话,最好设置成整数比,不然右下角的数字会模糊。
代码如下:
<div class="pptBox">
    <script type="text/javascript">
var focus_width=900; //焦点图的宽度
var focus_height=300; //焦点图的高度
var text_height=20; //焦点图说明文本的高度
var swf_height=focus_height+text_height;
var pics="pic/001.jpg|pic/002.jpg|pic/003.jpg|pic/004.jpg|pic/005.jpg|pic/006.jpg"; //这里设置图片源
var links="http://www.wgcss.com|http://www.wgcss.com|http://www.wgcss.com|http://www.wgcss.com|http://www.wgcss.com|http://www.wgcss.com"; //这里设置对应图片的链接
var texts="Atao Blog01|Atao Blog02|Atao Blog03|Atao Blog04|Atao Blog05|Atao Blog06";  //这里设置图片对应文本说明
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 +'">');
document.write('<param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="images/focus.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#F0F0F0">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="images/focus.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="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('</object>');
</script>
</div>
  评论这张
 
阅读(396)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018