实现图片轮播效果

步骤一.将下面的js代码拷贝到所要显示的地方并设置好图片显示的高度和宽度：

<scriptlanguage="javascript">

                    linkarr=newArray();

                    picarr=newArray();

                    textarr=newArray();

                    varfocus_width=395;   // 图片的宽度

                    varfocus_height=250;  // 图片的高度

                    vartext_height=0;  // 底部文字的高度

                    varpics="";

                    varlinks="";

                    vartexts="";

                    varswf_height=focus_height+text_height;   // 整个轮换效果的高度=图片高度+底部文字高度

                    vardefJpeg="http://www.cnbeta.com/image/index_37.jpg";

 

                    linkarr[1] = "http://www.cnbeta.com/articles/73700.htm"; picarr[1] = "image/1.jpg"; textarr[1] = "cnBeta 08年度精彩评论"; linkarr[2] = "http://www.cnbeta.com/articles/73715.htm"; picarr[2] = "image/2.jpg"; textarr[2] = "国务院常务会议同意启动3G牌照发放"; linkarr[3] = "http://www.cnbeta.com/articles/73734.htm"; picarr[3] = "image/3.jpg"; textarr[3] = "cnBeta 2009 新年献词"; linkarr[4] = "http://www.cnbeta.com/articles/73473.htm"; picarr[4] = "image/4.jpg"; textarr[4] = "三大XP盗版集团全面撤退 灰色产业链悄然漂白"; linkarr[5] = "http://www.cnbeta.com/articles/73531.htm"; picarr[5] = "image/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];

                        elsepics+="|"+picarr[i];

                    }

 

                    for (i=1; i<linkarr.length; i++) {

                        if (links=="") links=linkarr[i];

                        elselinks+="|"+linkarr[i];

                    }

 

                    for (i=1; i<textarr.length; i++) {

                        if (texts=="") texts=textarr[i];

                        elsetexts+="|"+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>

步骤二.根据要显示的信息设计数据库（这里新增一个字段图片类型imgtype是为了以后扩展）

 

数据库脚本：

create table bbs_pageset

(

    id int primary key identity(1,1),

    createdate datetime not null default getdate(),

    img nvarchar(50) not null default'',

    title nvarchar(100) not null default'',

    url nvarchar(50) not null default'',

    imgtype nvarchar(50) not null default'flash'

)

步骤三.用代码生成器生成好三层拷贝到项目中，然后在界面将如下内容

linkarr[1] = "http://www.cnbeta.com/articles/73700.htm"; picarr[1] = "image/1.jpg"; textarr[1] = "cnBeta 08年度精彩评论"; linkarr[2] = "http://www.cnbeta.com/articles/73715.htm"; picarr[2] = "image/2.jpg"; textarr[2] = "国务院常务会议同意启动3G牌照发放"; linkarr[3] = "http://www.cnbeta.com/articles/73734.htm"; picarr[3] = "image/3.jpg"; textarr[3] = "cnBeta 2009 新年献词"; linkarr[4] = "http://www.cnbeta.com/articles/73473.htm"; picarr[4] = "image/4.jpg"; textarr[4] = "三大XP盗版集团全面撤退 灰色产业链悄然漂白"; linkarr[5] = "http://www.cnbeta.com/articles/73531.htm"; picarr[5] = "image/5.jpg"; textarr[5] = "儿时经典动画《葫芦兄弟》也要出网游啦";

 

注释掉并绑定函数<%=GetFlashJs() %>

。

步骤四.在后台编写代码：

//获得轮番图片的js

        publicstringGetFlashJs()

        {

            //linkarr[1] = "http://www.cnbeta.com/articles/73700.htm"; picarr[1] = "image/1.jpg"; textarr[1] = "cnBeta 08年度精彩评论"; linkarr[2] = "http://www.cnbeta.com/articles/73715.htm"; picarr[2] = "image/2.jpg"; textarr[2] = "国务院常务会议同意启动3G牌照发放"; linkarr[3] = "http://www.cnbeta.com/articles/73734.htm"; picarr[3] = "image/3.jpg"; textarr[3] = "cnBeta 2009 新年献词"; linkarr[4] = "http://www.cnbeta.com/articles/73473.htm"; picarr[4] = "image/4.jpg"; textarr[4] = "三大XP盗版集团全面撤退 灰色产业链悄然漂白"; linkarr[5] = "http://www.cnbeta.com/articles/73531.htm"; picarr[5] = "image/5.jpg"; textarr[5] = "儿时经典动画《葫芦兄弟》也要出网游啦";

            //获取标示是flash图片的模型集合

            List<Model.Pageset>list=newDAL.PagesetDAO().GetListArray("*", "id", "asc", 5, 1, "imgtype='flash'");

            StringBuildersb=newStringBuilder();

            for (inti=0; i<list.Count; i++)

            {

                intindex=i+1;

                sb.Append("linkarr["+index+"]='"+list[i].url+"';");

                sb.Append("picarr["+index+"]='"+"upload/"+list[i].img+"';");

                sb.Append("textarr["+index+"]='"+list[i].title+"';");

            }

            returnsb.ToString();

        }

类似的最终效果：

http://www.cnbeta.com/ ,首页的左边的那个图片轮播

转载于:https://www.cnblogs.com/yinxiaofeng/archive/2012/07/27/2612323.html