JQuery Carousel中的ASP Repeater

时间:2015-01-26 10:06:57

标签: javascript jquery html css asp.net

我在JQuery Carousel中使用ASP Repeater,就像在link中一样。我在.aspx页面中添加了所有引用和链接,我的代码是:

    <

div class="head">
        <h1>Movies</h1> 
       </div>
       <div class="track example-5">
         <div class="inner">
           <h2>Record found: 23</h2>
            <div class="view-port">

            <asp:Repeater ID="Repeater1" runat="server"  >
                        <itemtemplate>                     
            <div id="example-5" class="slider-container">
                                <div class="item">
                                        <%# Eval("Link") %> <img   src="ShowVideoLogo.ashx?VideoID=<%# Eval("VideoID").ToString() %>"  width="200px" height="250px"   />                                       </div>                                                                        </div>
  </itemtemplate>  
 </asp:Repeater>    
 </div>
<div class="actions button-group">
 <a href="#" class="button primary icon reload">Restart</a>
           </div>
         </div>
         <div class="pagination">
          <a href="#" class="prev disabled"></a>
          <a href="#" class="next disabled"></a>
         </div>
       </div> 

我想在此转盘的ITEM中使用转发器但它没有显示当我在ITEM中使用图像链接时它正在工作:

 <div class="track example-5">
 <div class="inner">
  <h2>Css3 Animation</h2>
  <div class="view-port">
    <div id="example-5" class="slider-container">
      <div class="item">
        <img src="http://ib1.huluim.com/video/60044632?size=220x124">
        <p>Trailer 1</p>
      </div>
      <div class="item">
        <img src="http://ib2.huluim.com/video/60063785?size=220x124">
        <p>Trailer 2</p>
      </div>
      <div class="item">
        <img src="http://ib2.huluim.com/video/60062745?size=220x124">
        <p>Trailer 3</p>
      </div>
      <div class="item">
        <img src="http://ib1.huluim.com/video/40050156?size=220x124">
        <p>Trailer 4</p>
      </div>
      <div class="item">
        <img src="http://ib1.huluim.com/video/60066740?size=220x124">
        <p>Trailer 5</p>
      </div>
      <div class="item">
        <img src="http://ib4.huluim.com/video/60062747?size=220x124">
        <p>Trailer 6</p>
      </div>
      <div class="item">
        <img src="http://ib3.huluim.com/video/60062746?size=220x124">
        <p>Trailer 7</p>
      </div>
      <div class="item">
        <img src="http://ib1.huluim.com/video/60062744?size=220x124">
        <p>Trailer 8</p>
      </div>
      <div class="item">
        <img src="http://ib2.huluim.com/video/60060717?size=220x124">
        <p>Trailer 9</p>
      </div>
    </div>
  </div>
  <div class="actions button-group">
    <a href="#" class="button primary icon reload">Restart</a>
  </div>
 </div>
 <div class="pagination">
  <a href="#" class="prev disabled"></a>
  <a href="#" class="next disabled"></a>
    </div>
   </div>

1 个答案:

答案 0 :(得分:0)

试试这个,example-5 div需要在转发器之外,因为你不能有多个具有相同id的div。同样在上面的示例中,它只有一个div:

<div class="head">
    <h1>Movies</h1> 
</div>

<div class="track example-5">
    <div class="inner">
        <h2>Record found: 23</h2>
        <div class="view-port">
            <div id="example-5" class="slider-container">
                <asp:Repeater ID="Repeater1" runat="server"  >
                    <itemtemplate>                     
                        <div class="item">
                            <%# Eval("Link") %> 
                            <img   src="ShowVideoLogo.ashx?VideoID=<%# Eval("VideoID").ToString() %>"  width="200px" height="250px"   />                                     
                        </div>                                                                        
                    </itemtemplate>  
                </asp:Repeater>  
            </div>  
        </div>
        <div class="actions button-group">
            <a href="#" class="button primary icon reload">Restart</a>
        </div>
    </div>
    <div class="pagination">
        <a href="#" class="prev disabled"></a>
        <a href="#" class="next disabled"></a>
    </div>
</div>