ASP.NET实现图片自动播放功能(1)_asp 图片播放-优快云博客

本文链接：https://blog.youkuaiyun.com/olchid/article/details/1882574

该博客介绍了如何使用ASP.NET结合JavaScript实现图片自动播放功能。通过后台获取文章资源ID，将图片链接传递到前端，然后利用JavaScript定时器实现图片渐变切换的轮播效果。

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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CMS_CodeResource_Default" %>
<%@ Register Src="../UserControls/Head.ascx" TagName="Head" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <link type="text/css" href="../../Admin/Images/StyleSheet.css" rel=stylesheet/>

</head>
<body background="../../Admin/Images/background1.jpg" onload=fadein()>

    <form id="form1" runat="server">
    <div style="margin-left:200px">
        <script language=javascript>

var image1=<%=image1%>;
var image2=<%=image2%>;
var image3=<%=image3%>;

var imageUrl=new Array();
imageUrl[0]=image1;
imageUrl[1]=image2;
imageUrl[2]=image3;
var value=1;
var imagenum=0;
function fadein()
{

if(value<=110){
fadeinout.innerHTML="<img style='width: 202px; height: 170px;filter:alpha(opacity="+value+")' alt=fade src="+imageUrl[imagenum]+" border=0 />";
value++;
var timer=setTimeout("fadein()",100);
}
else
{
   clearTimeout(timer);
   var timer=setTimeout("fadeout()",1000);
   }
}
function fadeout()
{
if(value>=-10){
   fadeinout.innerHTML="<img style='width: 202px; height: 170px;filter:alpha(opacity="+value+")' alt=fade src="+imageUrl[imagenum]+" border=0 />";
   value--;
   var timer=setTimeout("fadeout()",100);
}
else
{
    clearTimeout(timer);
    imagenum++;
    if(imagenum>=imageUrl.length)
    {imagenum=0;}
    value=1;
    var timer=setTimeout("fadein()",500);
}

}
</script>
        <uc1:Head ID="Head1" runat="server" />
        <div id="fadeinout" style= "left: 204px; width: 206px; top: 166px;height: 174px">

       <img style="width: 202px; height: 170px; filter:alpha(opacity=0)" alt=fade src="../../Admin/Images/no1.gif" /></div>
       <img src="../../Admin/Images/BB08EFF4-088E-4B0F-97D0-E88B23A3DC3F/r_no3.gif" />
    </div>
    </form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using CMSDataClass;
using System.Data.SqlClient;
public partial class CMS_CodeResource_Default : System.Web.UI.Page
{
    public string image1, image2, image3;
    //imagelink1, imagelink2, imagelink3;
    protected void Page_Load(object sender, EventArgs e)
    {
        int i = 1;
        //TCmsArticle article = new TCmsArticle();
        TCmsArticleRset articleRset = new TCmsArticleRset();
        articleRset.Load();
        DataTable table = articleRset.DataSource.Table;
        TCmsResource resource;
        int count;
        string ResourceID;
        string s;
        foreach (DataRow row in table.Rows)
        {
            count = TCmsResource.CountOfResource(row["Article_ID"].ToString());
            if (count != 0)
            {
                ResourceID = TCmsResource.GetResourceID(row["Article_ID"].ToString());
                resource = new TCmsResource(ResourceID);
                resource.Select();
                s = System.Configuration.ConfigurationManager.AppSettings["ImageGetPath"].ToString() + resource.ResourceCID + "/" + "t_" + resource.ResourceFileName;

                switch (i)
                {
                    case 1:

                        image1 = "'"+s+"'";

                        break;
                    case 2:
                        image2 = "'"+s+"'";


                        break;
                    case 3:
                        image3 = "'"+s+"'";


                        break;

                }
            }

            i++;
            if (i > 3) { break; }
        }

    }
}