Question

我正在创建一个内容滑块，在其中从asp.net的转发器控件中的表中获取信息。我能够加载数据，但当页面加载时，它不会给我频繁的加载方式。稍后这会开始顺利加载，但首先它显示包含在DataSet中的所有值，并且这些值一个接一个地显示。

语言：lang-js

$("#slideshowinfo > div:gt(0)").hide();
            setInterval(function () {
                $('#slideshowinfo > div:first')

                  .fadeOut(1000)
                  .next()
                  .fadeIn(1000)
                  .end()
                  .appendTo('#slideshowinfo');

            }, 10000);

.aspx Page

<div id="templatemo_banner_content">
                            <div id="slideshowinfo">
                                <asp:Repeater ID="rptrNewsUpdates" runat="server">
                                    <ItemTemplate>
                                <div>
                                   <div class="header_01"><asp:Label ID="lblNewsHeading" runat="server" Text='<% #Eval("OrgName") %>' /></div>
                                   <p><asp:Label Id="lblNewsDescription" runat="server" Text='<%# string.Concat("Last Date:  ",Eval("Last Date"),"<br/>","Total Post: ",Eval("TotalPost"),"<br/>","Eligibility: ",Eval("Eligibility"),"<br/>","Description: ",Eval("description")) %>' /></p>
                                    <div class="button_01"><asp:LinkButton ID="linkReadMore" runat="server" PostBackUrl='<%# Eval("url") %>'>Read more</asp:LinkButton></div>
                                </div>
                                        </ItemTemplate>
                                    </asp:Repeater>                             
                            </div>
                        </div>

.cs代码背后

rptrNewsUpdates.DataSource = ds.Tables[0];
rptrNewsUpdates.DataBind();

在用户屏幕上呈现的输出 enter image description here

Answer 1

虽然我建议使用现有的jQuery Slide Show插件，但我修改了一些代码以实现您实际需要的内容。我还使您可以在同一页面上显示多个幻灯片（但请注意，它们将同时旋转）。我不认为我提供的JavaScript代码修改是生产级别的，但它们证明了这一点。请注意我添加了一些CSS以确保幻灯片的初始可见性显示窗格与页面加载时的对应关系。您需要修改一下Repeater代码，以解释我预先填充幻灯片放映的第一个窗格的class属性这一事实（您需要确保在物理上填充类属性在页面上。

在我提供的内容中，我已经删除了您的ASP.Net代码，以使我的示例更清晰。

以下是代码：

<html>
<head>
  <!--these style rules should be moved to a separate file -->
  <style type="text/css">
    .slideshow .pane {
      display: none;
    }
    .slideshow .pane.active {
      display: block;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

  <!--
  This JS code should be moved to a separate file, and its purpose is simply to be instructive for answering the question
  by refining the JS supplied in the question.

  This modified code is not production grade.

  Assumptions:
  -If multiple slide shows on a page, they rotate at the same time
  -No slideshow controls.

  -->
  <script type="text/javascript">

  (function($) {

    setInterval(function () {
        var fadeSpeed = 1000;

        $(".slideshow").each(function(){
          var $this = $(this);
          var $activeSlide = $this.find('div.active');
          var $nextSlide = $activeSlide.next();

          if($nextSlide.length == 0) {
            $nextSlide = $this.find("div.pane:first");
          }

          $activeSlide.fadeOut(fadeSpeed, function() {
            $(this).removeClass("active");
            $nextSlide.fadeIn(fadeSpeed).addClass("active");
          });


        });


    }, 10000);

  })(jQuery);

  </script>
</head>

<body>
<h1>Slide Show Example</h1>

  <div id="templatemo_banner_content">
    <h2>Slide Show 1</h2>
        <div class="slideshow">
          <!--insert ASP.Net Repeater code here in order to output each pane based on data in the datasource -->
          <div class="pane active">

              <div class="header_01">Org Name 1</div>
               <p>Description 1</p>
                <div class="button_01"><input type="button" value="Read More" /></div>
          </div>
          <div class="pane">

              <div class="header_01">Org Name 2</div>
               <p>Description 2</p>
                <div class="button_01"><input type="button" value="Read More" /></div>
          </div>

        </div>

      <h2>Slide Show 2</h2>

      <div class="slideshow">
        <!--insert ASP.Net Repeater code here in order to output each pane based on data in the datasource -->
        <div class="pane active">

            <div class="header_01">Org Name 3</div>
             <p>Description 3</p>
              <div class="button_01"><input type="button" value="Read More" /></div>
        </div>
        <div class="pane">

            <div class="header_01">Org Name 4</div>
             <p>Description 4</p>
              <div class="button_01"><input type="button" value="Read More" /></div>
        </div>

      </div>

</div>

</body>

</html>

从内容滑块中的asp.net中的转发器加载数据？

1 个答案: