当前的项目中要用到的效果,网上下了几个”源码”,但都不是很如意,只好自己研究了,效果演示地址: http://www.cnbeta.com/ ,首页的左边的那个图片轮播就是我想要的效果, 研究了一下他的源码,发现原来是这么简单呀..一段JS代码搞掂.
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>
<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后显示就不正常了!!!
版权声明：本文为D564457199原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。