- 浏览: 49662 次
- 性别:
- 来自: 襄樊
最新评论
-
670777516:
求整洁代码
JS实现图片轮换效果 -
670777516:
...楼主 能不能搞个完整代码啊 挤在一起看了晕啊
JS实现图片轮换效果 -
supersnake:
下载完成 解压成功
感谢提供资源下载
最近被转做.N ...
ASP.NET 3.5 开发大全DOC版
2009-01-03
文章分类:Web前端 关键字: 图片轮换, 轮播 当前的项目中要用到的效果,网上下了几个"源码",但都不是很如意,只好自己研究了,效果演示地址: http://www.cnbeta.com/ ,首页的左边的那个图片轮播就是我想要的效果, 研究了一下他的源码,发现原来是这么简单呀..一段JS代码搞掂.
实现图片轮换效果的其实是一个flash,就是那个template/slide.swf,真想看看他的源码,不知道他是怎么读取传进去的参数的哦!!!
要注意的时候图片和那个slide.swf必须在同一站点下,要不然就会显示出错了,比如上面的代码改成http://www.cnbeta.com/template/slide.swf后显示就不正常了!!!
<script language="javascript"> linkarr = new Array(); picarr = new Array(); textarr = new Array(); var focus_width=409; // 图片的宽度 var focus_height=307; // 图片的高度 var text_height=20; // 底部文字的高度 var pics = ""; var links = ""; var texts = ""; var swf_height = focus_height+text_height; // 整个轮换效果的高度=图片高度+底部文字高度 var defJpeg = "http://www.cnbeta.com/images/index_37.jpg"; linkarr[1]="http://www.cnbeta.com/articles/73700.htm";picarr[1] ="images/1.jpg";textarr[1]="cnBeta 08年度精彩评论";linkarr[2]="http://www.cnbeta.com/articles/73715.htm";picarr[2] ="images/2.jpg";textarr[2]="国务院常务会议同意启动3G牌照发放";linkarr[3]="http://www.cnbeta.com/articles/73734.htm";picarr[3] ="images/3.jpg";textarr[3]="cnBeta 2009 新年献词";linkarr[4]="http://www.cnbeta.com/articles/73473.htm";picarr[4] ="images/4.jpg";textarr[4]="三大XP盗版集团全面撤退 灰色产业链悄然漂白";linkarr[5]="http://www.cnbeta.com/articles/73531.htm";picarr[5] ="images/5.jpg";textarr[5]="儿时经典动画《葫芦兄弟》也要出网游啦"; for(i=1;i<picarr.length;i++){ //if(picarr[i].indexOf("jpg")==-1 && picarr[i].indexOf("JPG")==-1) picarr[i] = defJpeg; 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="template/slide.swf" width="' + focus_width + '" height="' + swf_height + '">'); document.write('<param name="movie" value="template/slide.swf" />'); document.write('<param name="allowScriptAcess" value="sameDomain" />'); 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>
实现图片轮换效果的其实是一个flash,就是那个template/slide.swf,真想看看他的源码,不知道他是怎么读取传进去的参数的哦!!!
要注意的时候图片和那个slide.swf必须在同一站点下,要不然就会显示出错了,比如上面的代码改成http://www.cnbeta.com/template/slide.swf后显示就不正常了!!!
发表评论
-
ASP.NET中读取excel内容,并显示在界面上
2010-07-10 08:34 1981项目中经常会用到把excel的文件内容导入到数据库中的,刚刚花 ... -
刚刚找到的IP地址对应地区数据库
2010-07-10 08:09 14912010-06-15 文章分类:Web前端 ... -
使用javascript通过className来获取元素
2010-07-10 08:01 908//原理: 用document.getElemen ... -
ASP.NET中过滤HTML字符串的两个方法
2010-06-09 10:30 9792010-05-20 文章分类:.net编程 ... -
符合WEB标准的浮动层(jQuery版)!
2010-06-09 10:13 9362008-10-26 文章分类:Web前端 关键 ... -
jQuery实战(四) - tab菜单
2010-06-09 10:00 7692008-11-19 文章分类:Web前端 ... -
JQuery控制图片无缝滚动
2010-06-09 09:44 15302009-05-10 经常有人问怎么在H ... -
jQuery插件—获取URL参数
2010-06-09 09:42 15292009-06-20 做的项目中需要用到通过 ... -
.NET中获取字符串的MD5码
2010-06-09 07:36 8552008-11-02 ① 导入命名空间: ... -
通过密钥对字符串进行加解密(C#)
2010-06-05 09:17 8142009-07-07 视频上看到的例子,对着视频 ... -
数字金额转为大写金额(C#)
2010-06-05 09:13 11912009-07-07 看视频的时候看到视频里有讲 ... -
对int数组进行从大到小的排序,并去除重复项
2010-06-05 09:10 8952009-07-09 ... -
有关javascript模态窗口的使用
2010-06-05 09:00 10022009-07-17 在web页面中需要弹出一些 ... -
VS2008修改自定义模板
2010-06-05 08:58 6502009-07-21 我们开发的时候习惯在代 ... -
框架frame自适应内容高度
2010-06-05 08:45 11542009-07-31 关键字: 框架,自适应, ... -
通过文件名检测文件是否存在于某文件夹中
2010-06-05 08:37 9782009-08-06 从太平洋采集了7万多条 ... -
jquery访中关村商城排行榜特效
2010-06-05 08:30 7522009-08-08 目前公司的网站上要用 ... -
中关村商城广告切换纯净代码
2010-06-05 08:25 5492009-08-08 效果如图: 原以为用fir ... -
javascript倒计时
2010-06-05 08:20 12612009-08-13 以前做的JSP青鸟论坛 ... -
ASP.NET生成HTML静态页的一个类
2010-06-05 08:15 7262009-08-27 某网友刚刚传给 ...
相关推荐
js实现图片轮换效果!可以设定按一定时间进行轮换,也可以通过点击右下角编号进行选择相应的图片显示!
js css 图片轮换 简单的修改代码就可实现自己的图片轮换效果js css 图片轮换 简单的修改代码就可实现自己的图片轮换效果
js实现图片轮换显示 滤镜效果 包含两中实现方式,都含有通用的滤镜效果
精美高校的 js 网页 图片轮换 4副图
图片轮换,通过CSS实现图片轮换。仿照常见的那个图片变换flash做的效果,纯CSS。
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ... <head> <title></title> [removed] var numb = 0; var imgnumb = 1; function showimg() { //两张图片切换方法1 /*numb++;
用jquery实现的页面图片轮换效果,适用于如首页广告的图片轮换
网页首页必备的图片轮换效果 和图片自动流动的效果!! 网页首页必备的图片轮换效果 和图片自动流动的效果!!
NULL 博文链接:https://sue1108.iteye.com/blog/1343656
jq实现全屏图片轮换效果可以实现全屏焦点图左右滚动切换效果,图片上下自适应。 jq实现全屏图片轮换效果演示图: 点击查看演示
jquery图片叠加点击轮换效果是一款不是很复杂的图片立体轮换效果。
js实现html网页图片轮换效果,左右带有按钮
Js+css 实现的腾讯qq客服图片焦点轮换效果.zip
网页模板——Js+css 实现的腾讯qq客服图片焦点轮换效果
使用方法这里就不再赘述,毕竟网页中配备好多效果,且每个效果均有js解释说明 特点: 1、响应式——可调节效果至任意宽度大小 2、支持图文混合内容显示 3、无需css 4、轻量级(<8kb的插件) ...
一款效果不错的图片轮换,可以根据需要,设置相应的图片大小,实现网页中常见的网页焦点图效果。
主要介绍了JS实现的图片自动轮换效果,有具体的实现思路及截图,希望对大家学习有所帮助
网站首页没有一点动画怎么可以,我以前用过Flash As3做过图片切换,效果非常...一个网站要不了几个这种效果,先实现了再说吧。最后的效果还是很高大上的。 页面+JS代码 代码如下: [removed] var picCurrent = 1;