Question

我的客户是一个旅行社，总是有特别优惠，并希望在幻灯片首页上发布这些特别优惠。图片应该是让我们说Eifel塔和右边的标题应该是一个包含更多信息的框，如标题，价格，可能是日期和按钮。因此，这些优惠将始终发生变化，客户将负责管理。现在问题是我想让它在转发器中工作。图片正在改变，但标题没有移动。它被设置在数据源中的第一个元素上，它就像那样。我试过一个小例子，所以我将在这里发布：

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。我得到的只是图片滑动，标题保留在第一个，永远不会改变到下一个。

Answer 1

好的，我找到了答案。使用两个中继器的方法就是上面的那个，对上面代码的修复就是我忘了给数据源中的OfferID赋值。我也会编辑它，然后上面的代码就可以运行了。

转发器中的Nivo滑块带有自定义标题

1 个答案: