0

我有一个客户是一家旅行社，他总是提供特别优惠，并希望在幻灯片的首页上发布这些特别优惠。图片应该是埃菲尔铁塔，右边的标题应该是一个包含更多信息的框，如标题、价格、可能的日期和按钮。所以这些优惠总是会发生变化，由客户来管理。现在问题是我想让它在中继器中工作。图片正在正确更改，但标题没有移动。它被设置在数据源中的第一个元素上，它就这样被卡住了。我已经尝试了一个小例子，所以我会在这里发布：

public partial class TestPage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        List<BindRepeater> source = new List<BindRepeater>
            {
                new BindRepeater {Pic = "Images/TestSlideshow/nemo.jpg", Text = "Text 5", OfferID = 1},
                new BindRepeater {Pic = "Images/TestSlideshow/walle.jpg", Text = "Text 2", OfferID = 2},
                new BindRepeater {Pic = "Images/TestSlideshow/up.jpg", Text = "Text 3", OfferID = 3},
                new BindRepeater {Pic = "Images/TestSlideshow/toystory.jpg", Text = "Text 4", OfferID = 4}
            };

        rptPic.DataSource = source;
        rptPic.DataBind();

        rptCaption.DataSource = source;
        rptCaption.DataBind();
    }

}

public class BindRepeater
{
    public int OfferID { get; set; }
    public string Pic { get; set; }
    public string Text { get; set; }
}

和

<div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
            <asp:Repeater ID="rptPic" runat="server">
                <ItemTemplate>
                    <div>
                        <asp:HiddenField runat="server" ID="OfferID" />
                        <img src='<%# Eval("Pic") %>' alt="" title='<%# String.Format("#htmlDiv{0}",Eval("OfferID")) %>' />
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>
    <asp:Repeater runat="server" ID="rptCaption">
        <ItemTemplate>
            <div id='<%# String.Format("htmlDiv{0}",Eval("OfferID")) %>' class="nivo-html-caption">
                <asp:Label runat="server" ID="lbl" Text='<%# Eval("Text") %>' CssClass="label_blue15"></asp:Label>
            </div>
        </ItemTemplate>
    </asp:Repeater>            <script type="text/javascript">
            $(window).load(function () {
                $('#slider').nivoSlider({
                    effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
                    animSpeed: 500, // Slide transition speed
                    pauseTime: 5000, // How long each slide will show
                    startSlide: 0, // Set starting Slide (0 index)
                    directionNav: true, // Next & Prev navigation
                    controlNav: true, // 1,2,3... navigation
                    controlNavThumbs: false, // Use thumbnails for Control Nav
                    pauseOnHover: true, // Stop animation while hovering
                    manualAdvance: false // Force manual transitions
                });
            });
        </script>

htmlcaption div 会有更多的东西，比如标签、按钮。这只是一个假人。在这个阶段，标题没有动画，我想以某种方式使它在图像发生变化时，从数据源中获取具有正确OfferID所需的文本。或者也许还有另一种方法？我还尝试了一个包含图像和标题的中继器，也没有工作。

谢谢

稍后编辑：我已经更改了代码，也为字幕创建了一个中继器，并尝试将 img 标题设置为字幕中继器内 div 的 id。我得到的只是图片滑动和标题停留在第一个，永远不会改变到下一个。

4

1 回答 1

1

ok, I managed to find the answer. The way to do it with two repeaters is the one above, and the fix to the upper code is that I forgot to give values to the OfferID in the datasource. I will edit that too and then the above code is good to run.

于 2013-01-11T10:05:54.730 回答