如何使用ASP.NET Repeater进行幻灯片放映

时间:2015-05-29 02:42:41

标签: c# asp.net webforms repeater

我正在从数据库中动态加载我的图片网址。

以下是转发器加载图像的当前代码

<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?或某些技术或代码?

1 个答案:

答案 0 :(得分: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页面的head部分添加所需的css文件链接。您需要适应您的项目。

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

在body标签的末尾,您将添加js脚本

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