如何使用 ASP.NET Repeater 制作幻灯片

Question

我正在从数据库中动态加载我的图像 url。

这是我当前用于转发器加载图像的代码

<asp:Repeater ID="Repeater1" runat="server" Visible="True">
    <ItemTemplate>
        <a><asp:Image ID="Image1" runat="server" Width="1200" Height="300" ImageURL='<%#Eval("ThumbnailPath")%>' class="slide" /></a>
    </ItemTemplate>
</asp:Repeater>

这是我的 .ASPX 页面，其中显示了图像，但它只显示垂直堆叠的图像我如何将其制作成幻灯片？

这是我将图片加载到转发器的代码

    GallerySTR = ConfigurationManager.ConnectionStrings["PPDB"].ConnectionString;
    GalleryCN = new SqlConnection(GallerySTR);

    string LoginQuery = "SELECT * FROM Albums";
    GalleryCN.Open();
    GalleryCMD = new SqlCommand(LoginQuery, GalleryCN);

    GalleryDA = new SqlDataAdapter(GalleryCMD);
    GalleryDS = new DataSet();
    GalleryDA.Fill(GalleryDS);
    Repeater1.DataSource = GalleryDS;
    Repeater1.DataBind();

我可以完美地加载图片，但我似乎无法将其制作成幻灯片。一些 javascript 也许？或者一些技术或代码？

Answer 1

去拿这个

jQuery Slideshow

这将进入您的 aspx 设计器

<div class="slideshow" data-transition="crossfade" data-loop="true" data-skip="false">
        <ul class="carousel">
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <li class="slide">
                        <img src='<%# DataBinder.Eval (Container.DataItem, "ImageUrl") %>' alt="" width="440" height="200" />
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </div>

将您的代码绑定到此中继器，并且不要忘记将脚本包含在 aspx 页面中。

更新

在 html 页面的头部添加您需要的 css 文件 link。您将需要适应您的项目。

<link href="Content/Slideshow.css" rel="stylesheet">

并且在 body 标签的末尾，您将添加 js 脚本

<script type="text/javascript" src="Scripts/Slideshow.js"></script>

如何使用 ASP.NET Repeater 制作幻灯片

How To Make Slideshow Using ASP.NET Repeater

c#

asp.net

webforms

repeater