C# 在asp.net中使用repeater显示滑块时出错

我有一个图像滑块，在它的布局中我有一个大的图片容器，里面有缩略图（图像）。单击每个缩略图时，它将显示在大图片容器中。这些图像来自数据库。我正在使用中继器查看它们。出现的问题是，当执行页面时，所有图片都会在大图片容器中打开，稍后，当我从缩略图中单击一张图片时，它会显示一张较大的图片

aspx代码为：

                <div class="carousel property">
                                        <div class="preview">

                                            <asp:Repeater ID="rptr_preview" runat="server">
                                                <ItemTemplate>
                                                    <a class="active colorbox gallery" id="slide-<%#Eval("sr_no") %>" href='<%#Eval("image_url") %>'>
                                                        <asp:Image ID="Preview" CssClass="active colorbox gallery" ImageUrl='<%#Eval("image_url") %>' runat="server" />
                                                    </a>
                                                </ItemTemplate>
                                            </asp:Repeater>


                                        </div>
                                        <!-- /.preview -->

                                        <div class="content">
                                            <ul>
                                                <asp:Repeater ID="rptr_slider" runat="server">
                                                    <ItemTemplate>
                                                        <li class="active" data-index='<%#Eval("sr_no") %>'>
                                                            <asp:Image ID="Image_thumbnail" ImageUrl='<%#Eval("image_url") %>' runat="server" />

                                            </ul>

                                            <a class="carousel-prev" href="#">Previous</a>
                                            <a class="carousel-next" href="#">Next</a>
                                        </div>
                                        <!-- /.content -->
                                    </div>

输出为：

我想要的显示如下：

---

在中继器中，为每个图像和每个tumbnail设置活动类。您应该只为中继器的第一项设置活动类

<asp:Repeater ID="rptr_preview" runat="server">
     <ItemTemplate>
       <a class="colorbox gallery" id="slide-<%#Eval("sr_no") %>" href='<%#Eval("image_url") %>'>
        <asp:Image ID="Preview" CssClass="active colorbox gallery" ImageUrl='<%#Eval("image_url") %>' runat="server" />
        </a>
        </ItemTemplate>
</asp:Repeater>

更新

在jquery中：

$(".preview a:nth-child(1)").addClass("active");
$(".content li:nth-child(1)").addClass("active");

从中继器中删除活动类，并在document.ready上执行以下操作

更新

首先从中继器中删除该类

<asp:Repeater ID="rptr_preview" runat="server">
     <ItemTemplate>
       <a class="colorbox gallery" id="slide-<%#Eval("sr_no") %>" href='<%#Eval("image_url") %>'>
        <asp:Image ID="Preview" CssClass="active colorbox gallery" ImageUrl='<%#Eval("image_url") %>' runat="server" />
        </a>
        </ItemTemplate>
</asp:Repeater>

其次，在document.ready中添加jquery。您必须添加对jquery的引用才能使其工作

<script type="text/javascript">
    $(document).ready(function() {
         $(".preview a:nth-child(1)").addClass("active");
         $(".content li:nth-child(1)").addClass("active");

    });
</script>

$（文档）.ready（函数（）{
$（“.preview a:n子级（1）”）.addClass（“活动”）；
$（“.content li:nth child（1）”）.addClass（“活动”）；
});

---

我建议将任何jquery或javascript代码放在您自己的.js文件中，并在页面中引用它，但为了演示的目的，脚本标记可以完成这项工作。

在您的中继器中，为每个图像和每个tumbnail设置活动类。您应该只为中继器的第一项设置活动类

<asp:Repeater ID="rptr_preview" runat="server">
     <ItemTemplate>
       <a class="colorbox gallery" id="slide-<%#Eval("sr_no") %>" href='<%#Eval("image_url") %>'>
        <asp:Image ID="Preview" CssClass="active colorbox gallery" ImageUrl='<%#Eval("image_url") %>' runat="server" />
        </a>
        </ItemTemplate>
</asp:Repeater>

更新

在jquery中：

$(".preview a:nth-child(1)").addClass("active");
$(".content li:nth-child(1)").addClass("active");

从中继器中删除活动类，并在document.ready上执行以下操作

更新

首先从中继器中删除该类

<asp:Repeater ID="rptr_preview" runat="server">
     <ItemTemplate>
       <a class="colorbox gallery" id="slide-<%#Eval("sr_no") %>" href='<%#Eval("image_url") %>'>
        <asp:Image ID="Preview" CssClass="active colorbox gallery" ImageUrl='<%#Eval("image_url") %>' runat="server" />
        </a>
        </ItemTemplate>
</asp:Repeater>

其次，在document.ready中添加jquery。您必须添加对jquery的引用才能使其工作

<script type="text/javascript">
    $(document).ready(function() {
         $(".preview a:nth-child(1)").addClass("active");
         $(".content li:nth-child(1)").addClass("active");

    });
</script>

$（文档）.ready（函数（）{
$（“.preview a:n子级（1）”）.addClass（“活动”）；
$（“.content li:nth child（1）”）.addClass（“活动”）；
});

---

我建议将任何jquery或javascript代码放在您自己的.js文件中，并在页面中引用它，但为了演示的目的，脚本标记可以完成这项工作。

在您的中继器中，为每个图像和每个tumbnail设置活动类。您应该只为中继器的第一项设置活动类

<asp:Repeater ID="rptr_preview" runat="server">
     <ItemTemplate>
       <a class="colorbox gallery" id="slide-<%#Eval("sr_no") %>" href='<%#Eval("image_url") %>'>
        <asp:Image ID="Preview" CssClass="active colorbox gallery" ImageUrl='<%#Eval("image_url") %>' runat="server" />
        </a>
        </ItemTemplate>
</asp:Repeater>

更新

在jquery中：

$(".preview a:nth-child(1)").addClass("active");
$(".content li:nth-child(1)").addClass("active");

从中继器中删除活动类，并在document.ready上执行以下操作

更新

首先从中继器中删除该类

<asp:Repeater ID="rptr_preview" runat="server">
     <ItemTemplate>
       <a class="colorbox gallery" id="slide-<%#Eval("sr_no") %>" href='<%#Eval("image_url") %>'>
        <asp:Image ID="Preview" CssClass="active colorbox gallery" ImageUrl='<%#Eval("image_url") %>' runat="server" />
        </a>
        </ItemTemplate>
</asp:Repeater>

其次，在document.ready中添加jquery。您必须添加对jquery的引用才能使其工作

<script type="text/javascript">
    $(document).ready(function() {
         $(".preview a:nth-child(1)").addClass("active");
         $(".content li:nth-child(1)").addClass("active");

    });
</script>

$（文档）.ready（函数（）{
$（“.preview a:n子级（1）”）.addClass（“活动”）；
$（“.content li:nth child（1）”）.addClass（“活动”）；
});

---

我建议将任何jquery或javascript代码放在您自己的.js文件中，并在页面中引用它，但为了演示的目的，脚本标记可以完成这项工作。

在您的中继器中，为每个图像和每个tumbnail设置活动类。您应该只为中继器的第一项设置活动类

<asp:Repeater ID="rptr_preview" runat="server">
     <ItemTemplate>
       <a class="colorbox gallery" id="slide-<%#Eval("sr_no") %>" href='<%#Eval("image_url") %>'>
        <asp:Image ID="Preview" CssClass="active colorbox gallery" ImageUrl='<%#Eval("image_url") %>' runat="server" />
        </a>
        </ItemTemplate>
</asp:Repeater>

更新

在jquery中：

$(".preview a:nth-child(1)").addClass("active");
$(".content li:nth-child(1)").addClass("active");

从中继器中删除活动类，并在document.ready上执行以下操作

更新

首先从中继器中删除该类

<asp:Repeater ID="rptr_preview" runat="server">
     <ItemTemplate>
       <a class="colorbox gallery" id="slide-<%#Eval("sr_no") %>" href='<%#Eval("image_url") %>'>
        <asp:Image ID="Preview" CssClass="active colorbox gallery" ImageUrl='<%#Eval("image_url") %>' runat="server" />
        </a>
        </ItemTemplate>
</asp:Repeater>

其次，在document.ready中添加jquery。您必须添加对jquery的引用才能使其工作

<script type="text/javascript">
    $(document).ready(function() {
         $(".preview a:nth-child(1)").addClass("active");
         $(".content li:nth-child(1)").addClass("active");

    });
</script>

$（文档）.ready（函数（）{
$（“.preview a:n子级（1）”）.addClass（“活动”）；
$（“.content li:nth child（1）”）.addClass（“活动”）；
});

---

我建议将任何jquery或javascript代码放在您自己的.js文件中，并在页面中引用它，但为了演示的目的，脚本标记完成了这项工作。

…您是对的…这正是我所想的，但我没有得到解决它的逻辑。任何建议请…你是对的…这正是我所想的，但我没有一个逻辑来解决它。任何建议请…你是对的…这正是我所想的，但我没有一个逻辑来解决它。任何建议请…你是对的…这正是我所想的，但我没有一个逻辑来解决它。有什么建议吗。