jquery Slider插入datalist代码后无效... [英] jquery Slider Not working after Inserting the datalist code...

查看：101
本文介绍了jquery Slider插入datalist代码后无效...的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

嗨朋友们，我希望每件事都很酷。我现在正面临一个新的问题，从事娱乐项目。这个项目名称是Findadda。在这个网站上有很多页面，如索引页面和内部页面。我不知道如何创建滑块，我拾取第三方工具。这个工具与HTML代码工作正常，但当我将HTML代码替换为Datalist。 Jquery slinder不工作。请看我错在哪里。



HTML code 

< ul id =carouselclass =elastislide-list> 
< li>< a href =＃>< img src =images / small / 1.jpgalt =image01/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 2.jpgalt =image02/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 3.jpgalt =image03/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 4.jpgalt =image04/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 5.jpgalt =image05/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 6.jpgalt =image06/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 7.jpgalt =image07/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 8.jpgalt =image08/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 9.jpgalt =image09/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 10.jpgalt =image10/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 11.jpgalt =image11/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 12.jpgalt =image12/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 13.jpgalt =image13/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 14.jpgalt =image14/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 15.jpgalt =image15/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 16.jpgalt =image16/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 17.jpgalt =image17/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 18.jpgalt =image18/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 19.jpgalt =image19/>< / a>< / li> 
< li>< a href =＃>< img src =images / small / 20.jpgalt =image20/>< / a>< / li> 
< / ul> 
<！ -  End Elastislide Carousel  - > 
 
< p> 调整浏览器大小以查看轮播如何适应< / p> 
 
< p class =info> 示例1：至少有3个（默认）图片始终可见。< / p> 
< / div> 
< / div> 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js>< / script> 
< script type =text / javascriptsrc =js / jquerypp.custom.js>< / script> 
< script type =text / javascriptsrc =js / jquery.elastislide.js>< / script> 
< script type =text / javascript> 
 
 $（'＃carousel'）。elastislide（）; 
 
< / script> lang =HTML>< / ul>





和我的asp.control与datalist 



 <   pre     lang   =  HTML >  



 
 

 <   asp：DataList     ID   =  mylist    runat   = 服务器 >  
 <  我temTemplate  >  
 <   ul     id   =  carousel    class   =  elastislide-list >  
 <   li  >  <   a     href   = ＃ > ;  
 <   asp：Image     ID   =  Image1    runat   =  server    ImageUrl   =' 〜/ images / small / <％ #eval（  image）％> '  /  >  
 
 <   / a   >  
 <   / li  >  
 
 <   / ul  >  
 
 <  < span class =code-leadattribute> / ItemTemplate  >  
 <   / asp：DataList



>

解决方案

（'＃carousel'）。elastislide（）;

< / script> lang =HTML>< / ul>





和我的asp.control与datalist 



 <   pre     lang   =  HTML >  



 
 

 <   asp：DataList     ID   =  mylist    runat   = 服务器 >  
 <  我temTemplate  >  
 <   ul     id   =  carousel    class   =  elastislide-list >  
 <   li  >  <   a     href   = ＃ > ;  
 <   asp：Image     ID   =  Image1    runat   =  server    ImageUrl   =' 〜/ images / small / <％ #eval（  image）％> '  /  >  
 
 <   / a   >  
 <   / li  >  
 
 <   / ul  >  
 
 <  < span class =code-leadattribute> / ItemTemplate  >  
 <   / asp：DataList



>


问题



好​​的，我做了一些研究，发现当你使用 DataList 时，它会生成一个表格客户端 HTML 。由于 carousel 无效。另一个问题是 ImageUrl ，它应该像 ImageUrl ='<％＃images / small /+ Eval（image ）％>'。

解决方案



如果你使用 Repeater 而不是 DataList ，它解决了问题，轮播工作完美。我已经尝试了这个。



所以，中继器看起来像... 

 <   asp：Repeater     ID   =  mylist    runat   =  server >  
 <   HeaderTemplate  >  
 < ;   ul     id  < span class =code-keyword> =  carousel    class   =  elastislide-list >  
 <   / HeaderTemplate  >  
 <   ItemTemplate  >  
 <   li  < span class =code-keyword>>  <   a     href   = ＃ >  
 <   asp：Image     ID   =  Image1    runat   =  server    ImageUrl   ='  <％＃  images / small / + Eval（  image）％> '    /  >  
 <   / a  >  <   / li   >  
 <   / ItemTemplate  >  
 <   FooterTemplate  >  
 <   / ul  >  <   / FooterTemplate  >  
 <   / asp：Repeater  >


Hi friends I hope every thing is cool.I am facing a new problem at this time working on entertainment project. This project name is Findadda. In this website have a many pages like that index page and internal page. I have no idea how to create a slider, I pickup thrid party tool. this tool working fine with html code but when i replace html code to Datalist. Jquery slinder not working. plz look my where am Wrong.

HTML code 

<ul id="carousel" class="elastislide-list">
					<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
					<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
					<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
					<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
					<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
					<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>
					<li><a href="#"><img src="images/small/7.jpg" alt="image07" /></a></li>
					<li><a href="#"><img src="images/small/8.jpg" alt="image08" /></a></li>
					<li><a href="#"><img src="images/small/9.jpg" alt="image09" /></a></li>
					<li><a href="#"><img src="images/small/10.jpg" alt="image10" /></a></li>
					<li><a href="#"><img src="images/small/11.jpg" alt="image11" /></a></li>
					<li><a href="#"><img src="images/small/12.jpg" alt="image12" /></a></li>
					<li><a href="#"><img src="images/small/13.jpg" alt="image13" /></a></li>
					<li><a href="#"><img src="images/small/14.jpg" alt="image14" /></a></li>
					<li><a href="#"><img src="images/small/15.jpg" alt="image15" /></a></li>
					<li><a href="#"><img src="images/small/16.jpg" alt="image16" /></a></li>
					<li><a href="#"><img src="images/small/17.jpg" alt="image17" /></a></li>
					<li><a href="#"><img src="images/small/18.jpg" alt="image18" /></a></li>
					<li><a href="#"><img src="images/small/19.jpg" alt="image19" /></a></li>
					<li><a href="#"><img src="images/small/20.jpg" alt="image20" /></a></li>
				</ul>
				<!-- End Elastislide Carousel -->

				<p>Resize the browser to see how the carousel adapts</p>

				<p class="info">Example 1: A minimum of 3 (default) images are always visible.</p>
			</div>
		</div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquerypp.custom.js"></script>
		<script type="text/javascript" src="js/jquery.elastislide.js"></script>
		<script type="text/javascript">
			
			$( '#carousel' ).elastislide();
			
		</script> lang="HTML"></ul>



and my asp.control with datalist 

<pre lang="HTML">


<asp:DataList ID="mylist" runat="server">
              <ItemTemplate>
              <ul id="carousel" class="elastislide-list">
                  <li><a href="#">
                      <asp:Image ID="Image1" runat="server" ImageUrl='~/images/small/<%#eval("image")%>'/>

                  </a>
                  </li>

              </ul>

              </ItemTemplate>
              </asp:DataList


>
 解决方案 
( '#carousel' ).elastislide();
			
		</script> lang="HTML"></ul>
 



and my asp.control with datalist 




<pre lang="HTML">



<asp:DataList ID="mylist" runat="server">
              <ItemTemplate>
              <ul id="carousel" class="elastislide-list">
                  <li><a href="#">
                      <asp:Image ID="Image1" runat="server" ImageUrl='~/images/small/<%#eval("image")%>'/>

                  </a>
                  </li>

              </ul>

              </ItemTemplate>
              </asp:DataList


>

Problem


Okay, I did some research and find out that when you use DataList, it generates a table at the client side HTML. Due to which carousel is not working. One more problem was in the ImageUrl, which should be like ImageUrl='<%# "images/small/" + Eval("image")%>'.


Solution


If you use Repeater instead of DataList, it solves the issue and carousel works perfectly. I have tried this at my end.



So, the Repeater would look like...


<asp:Repeater ID="mylist" runat="server">
    <HeaderTemplate>
        <ul id="carousel" class="elastislide-list">
    </HeaderTemplate>
    <ItemTemplate>
        <li><a href="#">
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# "images/small/" + Eval("image")%>' />
        </a></li>
    </ItemTemplate>
    <FooterTemplate>
        </ul></FooterTemplate>
</asp:Repeater>


                        
这篇关于jquery Slider插入datalist代码后无效...的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

                        
                    

                    

                        查看全文
                    

                

				

                            
                        

                

            

        

        

            



        

        

            
相关文章

            
        

        

            



        

    

    

        

            
其他开发语言最新文章

            
        

        

            

                热门教程
            

            
        

        

            

                热门工具
            

            
        

        
    




    



    

        

            登录
            关闭
        

        

            

                扫码关注1秒登录
            

            

                
            

            

                
                
            

            

                发送“验证码”获取
                |
                15天全站免登陆