手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

长时间不更新,送上点JS

首页 > Javascript >

长时间没有更新了,一是因为单位比较忙二来是老婆快生了。。

但一直不更新也不太好,这里送上一小段JS,FOR jQuery。

很多时候,我们需要在一堆图片列表里进行左移右移,比如我现在有10个IMG,我放到DIV里面默认显示5个,这时候我会在页面上留下两个按钮进行左移,右移,以前的移动可能会很复杂,自从有了jquery,一切变得这么简单。

 

XML/HTML代码
  1. <div id="pic_list">  
  2.     <span id="p_left"> << </span>  
  3.     <ul>  
  4.         <li><img src="aa.jpg" /><li>  
  5.         <li><img src="aa.jpg" /><li>  
  6.         <li><img src="aa.jpg" /><li>  
  7.         <li><img src="aa.jpg" /><li>  
  8.         <li><img src="aa.jpg" /><li>  
  9.         <li><img src="aa.jpg" /><li>  
  10.         <li><img src="aa.jpg" /><li>  
  11.         <li><img src="aa.jpg" /><li>  
  12.         <li><img src="aa.jpg" /><li>  
  13.         <li><img src="aa.jpg" /><li>  
  14.     </ul>  
  15.     <span id="p_right"> >> </span>  
  16. </div>  
  17. <script language="JavaScript">  
  18. <!--   
  19.     $('#p_left').click(function(){   
  20.         var list_length = $('#pic_list ul li').length;   
  21.         $('#pic_list ul li:eq(0)').before( $('#pic_list ul li:eq('+(list_length-1)+')').remove() );   
  22.     });   
  23.     $('#p_right').click(function(){   
  24.         $('#pic_list ul').append( $('#pic_list ul li:eq(0)').remove() );   
  25.     });   
  26. //-->  
  27. </script>  

具体样式我就不提供了,黑黑,这样的方法应该算是最简单的了。。毕竟你在做页面的时候,肯定会都把li的宽度设的一样




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):