Asp.net 图片幻灯切换效果(动态加载)，并兼容几乎所有浏览器

18

2012
06

方法1和2兼容IE6、IE7、IE8、FF、谷歌、Opera、Safari浏览器，方法3在IE6下不显示。

方法1：

效果图

aspx

不能上传附件，真麻烦。绿色为需要另外下载的附件。

<div id="FocusViewer_2"></div>
                                                        <asp:HiddenField ID="hdfPics" runat="server" />
                                                        <asp:HiddenField ID="hdfLinks" runat="server" />
                                                        <asp:HiddenField ID="hdfTexts" runat="server" />
                                                    <script language="javascript" type="text/javascript">
                                                        function Showflash() {
                                                            var pics = document.getElementById("hdfPics").value;
                                                            var links = document.getElementById("hdfLinks").value;
                                                            var texts = document.getElementById("hdfTexts").value;

                                                            var FocusViewer_2_focus_width = 305;
                                                            var FocusViewer_2_focus_height = 200;
                                                            var FocusViewer_2_text_height = 20;
                                                            var FocusViewer_2_swf_height = FocusViewer_2_focus_height + FocusViewer_2_text_height;

                                                            var FocusViewer_2_pics = pics;
                                                            var FocusViewer_2_links = links;
                                                            var FocusViewer_2_texts = texts;

                                                            var FocusViewer_2_FocusFlash = new bairongFlash("flash/focusviewer.swf", "focusflash", FocusViewer_2_focus_width, FocusViewer_2_swf_height, "7", "#FFF", false, "High");
                                                            FocusViewer_2_FocusFlash.addParam("allowScriptAccess", "sameDomain");
                                                            FocusViewer_2_FocusFlash.addParam("menu", "false");
                                                            FocusViewer_2_FocusFlash.addParam("wmode", "transparent");

                                                            FocusViewer_2_FocusFlash.addVariable("pics", FocusViewer_2_pics);
                                                            FocusViewer_2_FocusFlash.addVariable("links", FocusViewer_2_links);
                                                            FocusViewer_2_FocusFlash.addVariable("texts", FocusViewer_2_texts);
                                                            FocusViewer_2_FocusFlash.addVariable("borderwidth", FocusViewer_2_focus_width);
                                                            FocusViewer_2_FocusFlash.addVariable("borderheight", FocusViewer_2_focus_height);
                                                            FocusViewer_2_FocusFlash.addVariable("textheight", FocusViewer_2_text_height);
                                                            FocusViewer_2_FocusFlash.write("FocusViewer_2");
                                                        }
                                                    </script>

aspx.cs文件：

//图片幻灯，需要的地方直接调用就行
    public void GetSlideNews()
    {
        DataTable dtPic = artmg.GetList(6, " and ColumnCode='01' and Contents like '%img%' ");
        string strPicFiles = "";
        string strLink = "";
        string strTitle = "";
        string strPage = "NewsView.aspx";
        bool bFirst = true;
        string strPic = "";

        foreach (DataRow row in dtPic.Rows)
        {
            strPic = Common.PictureUrlFormArticle(row["Contents"].ToString().Trim());
            if (strPic.Length > 0)
            {
                if (bFirst)
                {
                    strPicFiles += "" + strPic;
                    strLink += strPage + "?ID=" + Common.UrlEncode(row["ID"].ToString().Trim());
                    if (row["Subject"].ToString().Trim().Length > 21)
                    {
                        strTitle += row["Subject"].ToString().Trim().Substring(0, 21) + "…";
                    }
                    else
                    {
                        strTitle += row["Subject"].ToString().Trim();
                    }
                    bFirst = false;
                }
                else
                {
                    strPicFiles += "|" + "" + strPic;
                    strLink += "|" + strPage + "?ID=" + Common.UrlEncode(row["ID"].ToString().Trim());
                    if (row["Subject"].ToString().Trim().Length > 15)
                    {
                        strTitle += "|" + row["Subject"].ToString().Trim().Substring(0, 15) + "…";
                    }
                    else
                    {
                        strTitle += "|" + row["Subject"].ToString().Trim();
                    }

                }
            }
            this.hdfPics.Value = strPicFiles;
            this.hdfLinks.Value = strLink;
            this.hdfTexts.Value = strTitle;
        }
    }

方法2：

效果图：

需要下载jquery.KinSlideshow-1.2.1.min.js，jquery.KinSlideshow-1.1.js，jquery.js包。

aspx页面：

</script>

aspx.cs页面：

DataTable dtPic = artmg.GetList(6, " and ColumnCode='01' and Contents like '%IMG%' ");

            for (int i = 0; i < dtPic.Rows.Count; i++)
            {
                str += "<a href=\"NewsView.aspx?id=" + Common.UrlEncode(dtPic.Rows[i]["ID"].ToString()) + "\" target=\"_blank\"><img src=\"" + Common.PictureUrlFormArticle(dtPic.Rows[i]["Contents"].ToString()) + "\" alt=\"" + Common.CutString(dtPic.Rows[i]["Subject"].ToString(), 13, "..") + "\" width=\"320\" height=\"190\" /></a>";
            }

Common.PictureUrlFormArticle为自定义从文章中取图片的方法。

方法3：

效果图：

先下载个RevealTrans.js包。

样式表：

Html&Javascript

<div id="idPicShow" class="container">
<ul id="idNum">
</ul>
</div>
<div id="idPicText">
</div>
<script>
<%=str %>
// var rvt = new RevealTrans("idPicShow");

//       //添加变换对象  格式为图片地址，图片名称，跳转网址
//       rvt.Add('upload/201206181541282048.jpg', '图片变换效果', 'http://www/1205642.html');
//       rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www/1194272.html');
//       rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www1236770.html');
var oText = $("idPicText"), arrImg = [];
var oNum = $("idNum"), arrNum = [];
//设置图片列表
Each(rvt.List, function (list, i) {
//图片式
var img = document.createElement("img");
img.src = list["img"]; img.alt = list["text"];
arrImg[i] = img;
//oList.appendChild(img);
//按钮式
var li = document.createElement("li");
li.innerHTML = i + 1;
arrNum[i] = li;
oNum.appendChild(li);
//事件设置
img.onmouseover = li.onmouseover = function () { rvt.Auto = false; rvt.Index = i; rvt.Start(); };
img.onmouseout = li.onmouseout = function () { rvt.Auto = true; rvt.Start(); };
});

//设置图片列表样式文本显示区域
rvt.onShow = function () {
    var i = this.Index, list = this.List[i];
    //图片式
    //Each(arrImg, function(o){ o.className = ""; }); arrImg[i].className = "on";
    //按钮式
    Each(arrNum, function (o) { o.className = ""; }); arrNum[i].className = "on";
    //文本区域
    oText.innerHTML = !!list.url ? "<a href='" + list.url + "' target='_blank'>" + list.text + "</a>" : list.text;

}

//文本显示区域
oText.onmouseover = function () { rvt.Auto = false; rvt.Stop(); };
oText.onmouseout = function () { rvt.Auto = true; rvt.Start(); };

rvt.Start();

</script>

C#实现动态读取数据

public string str = "";//后台定义全局变量

str = "var rvt = new RevealTrans('idPicShow');";
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                str += "rvt.Add('" + StringUtil.PictureUrlFormArticle(dt.Rows[i]["Content"].ToString()) + "','" + Common.CutString(dt.Rows[i]["Subject"].ToString(), 13, "..") + "','NewsDetails.aspx?id=" +Common.UrlEncode(dt.Rows[i]["ID"].ToString()) + "&item=" +Common.UrlEncode(dt.Rows[i]["Item"].ToString()) + "');";

}

//StringUtil.PictureUrlFormArticle(dt.Rows[i]["Content"].ToString()) 自定义的获取图片路径

//Common.CutString(dt.Rows[i]["Subject"].ToString(), 13, "..") 图片标题

//'NewsDetails.aspx?id=" +Common.UrlEncode(dt.Rows[i]["ID"].ToString()) + "&item=" +Common.UrlEncode(dt.Rows[i]["Item"].ToString()) + " 跳转网址

来源：http://hi.baidu.com/moniteryao/item/4c1e393fc5efedfedf22217f

Tags: 切换效果