Question

以下任何人都可以帮助我。

我需要在asp.net的图像框控件中显示3个图像。图像应显示30秒，并且应该是一个接一个。

Answer 1

您的问题更多地是关于Javascript而不是C# / ASP.NET。

有几种方法可以创建Image Slideshow：

使用纯JavaScript：

创建一个函数来加载下一个图像并使用SetInterval()函数在特定时间后激活该函数
使用JQuery等JavaScript插件。

纯function changeImage() { // ... var img = new Image(); img.src = "fileNameForTheNextImage"; document["YourIMGTagID"].src = img.src; } // Then in your document load, after DOM Ready: setInterval("changeImage()", 30000);示例：

{{1}}

Answer 2

我认为最好创建一些javascript以便于阅读，并使用RegisterStartupScript从代码后面调用它。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript">
        // called every n milisecond
        function changeImage(imgID, imageList) {
            if (typeof (this.currentImageCounter) == "undefined") {
                // init counter when necessary
                this.currentImageCounter = 0;
            } else {
                // increment counter between 0 to image array length

                this.currentImageCounter = (++this.currentImageCounter) % imageList.length;
            }

            // display image based on current image counter
            document.getElementById(imgID).src = imageList[this.currentImageCounter];
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Image ID="imgSlideShow" runat="server" ClientIDMode="Static" />
    </div>
    </form>
</body>
</html>

注意：请确保将ClientIDMode =“static”，否则javascript将无法识别您的图像控件。

然后从后面的代码中调用它：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    imgSlideShow.ImageUrl = "../chimg/1-P.png"

    ClientScript.RegisterStartupScript(GetType(String), "scChangeImage", _
        "setInterval(""changeImage('imgSlideShow', " & _
        "new Array('../chimg/1-i.png','../chimg/2-i.png','../chimg/3-i.PNG'))"",2000);", True)

End Sub

如果您愿意，也可以使用C＃调用RegisterStartupScript。

Answer 3

您最好使用jQuery和CSS。

执行此操作

例如，请参阅Easy Jquery Auto Image Rotator和Create an Image Rotator with Description (CSS/jQuery)或Google JQuery Image Rotator。

改变图像

3 个答案: