首页 > PHP资讯 > HTML5培训技术 > jQuery实现图片滚动效果

jQuery实现图片滚动效果

HTML5培训技术

   

       

       jquery图片自动无缝滚动

       <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"type="text/javascript">《script》

       

   

   

   

       

               

  •                

               

  •        

   

   <script type="text/javascript">

       jQuery.fn.extend({

           pic_scroll:function(){

              $(this).each(function(){

                  var _this=$(this);//存储对象

                  var ul=_this.find("ul");//获取ul对象

                  var li=ul.find("li");//获取所有图片所有的li

                  var w=li.size()*li.width();//统计图片的长度

                  li.clone().prependTo(ul);//克隆图片一份放入ul里

                  ul.width(2*w);//设置ul的长度,使所有图片排成一排

                  var i=1,l;

                  _this.hover(function(){i=0},function(){i=1});//鼠标经过时设置i=0达到鼠标经过停止效果

                  setInterval(function(){

                      //定时滚动函数

                      l = _this.scrollLeft();

                      if (l < w) {

                          _this.scrollLeft(l+i);

                      } else {

                          _this.scrollLeft(0);

                      }

                  },20);

               })

           }

       });

       $(document).ready(function(){

          $(".a,.aa").pic_scroll();//多个地方使用

       })

   《script》

   

   

上一篇:如何通过jQuery实现ajax
下一篇:jQuery.each

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持14不支持0