图片循环渐变显示

最新推荐文章于 2021-06-08 21:08:02 发布

原创最新推荐文章于 2021-06-08 21:08:02 发布 · 715 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#image #dataset #string #generator #filter #border

本文介绍了一种使用JavaScript实现图片轮播的方法。通过预加载图片并定时切换显示，结合鼠标悬停显示文字及链接功能，实现了动态展示效果。适用于网站轮播图等应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

protected string LoadImage()
        {
            string sql="select * from ImageChange";
            DataSet ds=Document.DataHelper.GetDataSet(sql);
            string img="";
            for(int m=0;m<ds.Tables[0].Rows.Count;m++)
            {
                img+="var ImgSrc = new Array();";//图片地址
                img+="ImgSrc["+m+"] = "+"""+ds.Tables[0].Rows[m]["DisplayImage"].ToString()+"";";

                img+="for (var i=0;i<ImgSrc.length;i++){(new Image()).src = ImgSrc[i];}";//预加载图片

                img+="var ImgAlt = new Array();";//鼠标放上去显示的文字
                img+="ImgAlt["+m+"] = "+"""+ds.Tables[0].Rows[m]["Description"].ToString()+"";";

                img+="var ImgHerf = new Array();";//链接
                img+="ImgHerf["+m+"] = "+"""+ds.Tables[0].Rows[m]["URL"].ToString()+"";";
            }
            return img;
        }

"var ImgSrc = new Array();
ImgSrc[0] = /"../Exhibit/images/img1.jpg/";
ImgSrc[1] = /"../Exhibit/images/img3.jpg/";

for (var i=0;i<ImgSrc.length;i++){(new Image()).src = ImgSrc[i];}
var ImgAlt = new Array();
ImgAlt[0] = /"12/";
ImgAlt[1] = /"13/";

var ImgHerf=new Array();
ImgHerf[0] = /"WWS/";
ImgHerf[1] = /"14/";"

<!--
            var ImgSrc = new Array();//图片地址
            ImgSrc[0] = "TN_01087_0122.JPG"
            ImgSrc[1] = "TN_01384_582.JPG"

for (var i=0;i<ImgSrc.length;i++){(new Image()).src = ImgSrc[i];}//预加载图片

            var ImgAlt = new Array();//鼠标放上去显示的文字
            ImgAlt[0] = "美国《国家地理杂志》1"
            ImgAlt[1] = "美国《国家地理杂志》2"

            var ImgHerf = new Array();//链接
            ImgHerf[0] = "page_01.htm"
            ImgHerf[1] = "page_02.htm"