從內容滑塊中的asp.net中的轉發器加載數據？

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

<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();

在用戶屏幕上呈現的輸出 在此輸入圖像描述

Answer 1

雖然我建議使用現有的jQuery Slide Show插件，但我修改了一些代碼以實現您實際需要的內容。 我還使您可以在同一頁面上顯示多個幻燈片（但請注意，它們將同時旋轉）。 我不認為我提供的JavaScript代碼修改是生產級別的，但它們證明了這一點。 請注意我添加了一些CSS以確保幻燈片的初始可見性顯示窗格與頁面加載時的對應關系。 你需要修改一下Repeater代碼，以解釋我是否預先填充了幻燈片放映的第一個窗格的class屬性（你需要確保在頁面上物理填充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 個解決方案

解決方案1
1 已采納 2015-07-07 21:57:43

從內容滑塊中的asp.net中的轉發器加載數據？

問題描述

1 個解決方案

解決方案1 1 已采納 2015-07-07 21:57:43

解決方案1
1 已采納 2015-07-07 21:57:43