当前的项目中要用到的效果,网上下了几个"源码",但都不是很如意,只好自己研究了,效果演示地址: http://www.cnbeta.com/ ,首页的左边的那个图片轮播就是我想要的效果, 研究了一下他的源码,发现原来是这么简单呀..一段JS代码搞掂.
<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后显示就不正常了!!!
下面附上源码
发现javaeye对chrome浏览器支持不够好啊...在chrome里写完文章了上传附件的时候总是上传不了...在FF里就没问题!!!
分享到:
相关推荐
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;