SlideShowExtender实现图片自动切换

最新推荐文章于 2024-09-26 19:25:46 发布

转载最新推荐文章于 2024-09-26 19:25:46 发布 · 2.9k 阅读

文章标签：

#server #asp #image #button #border #div

AJax控件用法专栏收录该内容

2 篇文章

订阅专栏

本文提供了一个使用ASP.NET WebForm实现的图片轮播实例，通过结合ToolkitScriptManager、Image、Label和SlideShowExtender控件，实现了自动播放、上一张和下一张功能，展示了如何在网页中优雅地展示图片集。此教程适用于初学者快速掌握WebForm的控件使用和事件处理。

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

前台页面：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" CombineScripts="false">
        </asp:ToolkitScriptManager>
           <div style="text-align:center">
            <asp:Label runat="Server" ID="imageTitle"/><br />
            <asp:Image ID="Image1" runat="server" 
                Height="300"
                Style="border: 1px solid black;width:auto" 
                ImageUrl="images/01.jpg"
                AlternateText="Blue Hills image" />
                  <asp:Label runat="server" ID="imageDescription"></asp:Label><br /><br />
            <asp:Button runat="Server" ID="prevButton" Text="Prev" Font-Size="Larger" />
            <asp:Button runat="Server" ID="playButton" Text="Play" Font-Size="Larger" />
            <asp:Button runat="Server" ID="nextButton" Text="Next" Font-Size="Larger" />
        <asp:SlideShowExtender ID="SlideShowExtender1" runat="server"   TargetControlID="Image1"
                SlideShowServiceMethod="GetSlides" 
                AutoPlay="true" 
                ImageTitleLabelID="imageTitle"
                ImageDescriptionLabelID="imageDescription" 
                NextButtonID="nextButton" 
                PlayButtonText="Play" 
                StopButtonText="Stop" 
                PreviousButtonID="prevButton" 
                PlayButtonID="playButton" 
                Loop="true" PlayInterval="1000" >
        </asp:SlideShowExtender>
    </div>
    </form>
</body>
</html>

后台代码：

        [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
        public static AjaxControlToolkit.Slide[] GetSlides()
        {
            return new AjaxControlToolkit.Slide[] { 
            new AjaxControlToolkit.Slide("images/01.jpg", "图片01的标题", "图片01的说明"), 
            new AjaxControlToolkit.Slide("images/02.jpg", "图片02的标题", "图片02的说明"), 
            new AjaxControlToolkit.Slide("images/03.jpg", "图片03的标题", "图片03的说明"), 
            new AjaxControlToolkit.Slide("images/04.jpg", "图片04的标题", "图片04的说明"), 
            new AjaxControlToolkit.Slide("images/05.jpg", "图片05的标题", "图片05的说明")};
        }