您的位置：首页 > Web前端 > JQuery

jquery实现图片滚动效果

2013-03-04 11:30 696 查看
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

       <title>jquery 图片自动无缝滚动</title>

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

       <style type="text/css">

       ul,li { list-style: none;margin: 0; padding: 0;}

       li { float: left;}

       img { width: 100px; height: 100px; padding:0 2px}

       .a { width: 400px; height:100px;margin: 0 auto; overflow: hidden; border: 1px solid red;}

       .aa { width: 200px; height:100px;margin: 50px auto 0 auto; overflow: hidden; border: 1px solid red;}

   </style>

   </head>

   <body>

   <div class="a">

       <ul>

           <li>

               <a href="#"><img alt="" src=" images/1.jpg"/>

               </a>

           </li>

           <li >

               <a href="#"><img alt="" src="images/2.png">

               </a>

           </li>

           <li>

               <a href="#"><img alt=""  src="images/3.jpg">

               </a>

           </li>

           <li>

               <a href=""><img alt="" src="images/4.jpg">

               </a>

           </li>

           <li>

               <a href="#"><img alt="" src="images/5.jpg">

               </a>

           </li>

       </ul>

   </div>

   <div class="aa">

       <ul>

           <li>

               <a href="#"><img alt="" src=" images/1.jpg"/>

               </a>

           </li>

           <li >

               <a href="#"><img alt="" src="images/2.png">

               </a>

           </li>

           <li>

               <a href="#"><img alt=""  src="images/3.jpg">

               </a>

           </li>

           <li>

               <a href=""><img alt="" src="images/4.jpg">

               </a>

           </li>

           <li>

               <a href="#"><img alt="" src="images/5.jpg">

               </a>

           </li>

       </ul>

   </div>

   <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>

   </body>

   </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航