jquery实现图片滚动效果的简单实例

网络编程 JavaScript javascript类库 jquery 分类:[default] 更新日期: 2015-08-16
这篇文章主要介绍了jquery实现图片滚动效果的简单实例,有需要的朋友可以参考一下

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>jquery 图片自动无缝滚动</title>
       <script src="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>


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 将xml文件作为一个小的数据库,进行学生的增删改查的简单实例
    下面小编就为大家带来一篇将xml文件作为一个小的数据库,进行学生的增删改查的简单实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧1.xml文件: <?xml version="1.0" encoding="UTF-8"?><Students> <stude ...
  • jsp输出九九乘法表的简单实例
    jsp输出九九乘法表的简单实例
    下面小编就为大家带来一篇jsp输出九九乘法表的简单实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 <% String st = ""; for(int i = 1; i <= 9; i++){ for(int j = 1; j <= i; j++){ st += j+"x&q ...
  • 关于图片存储格式的整理(JPEG格式介绍)
    这篇文章主要介绍了关于图片存储格式的整理JPEG,需要的朋友可以参考下JPG jpg全名是JPEG .JPEG 图片以 24 位颜色存储单个光栅图像.JPEG 是与平台无关的格式,支持最高级别的压缩,不过,这种压缩是有损耗的.渐近式 JPEG 文件支持交错. jpg功能 可以提高或降低 JPEG文件压缩的级别.但是,文件大小是以牺牲图像质量为代价的.压缩比率 ...
  • Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    这篇文章主要介绍了Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下今天项目经理刚交给一个活儿,要我实现这样一个功能:要实现的是验证码文本框变窄一点,然后右边加入一副验证码图片,并且在响应式布局的情况下在移动端访问的时候验证码图片能保持和验证码文本框在同一行,这个怎么做?难为了半天 ...
  • Linux上安装Python的PIL和Pillow库处理图片的实例教程
    这里我们来看一下在Linux上安装Python的PIL和Pillow库处理图片的实例教程,包括一个使用Pillow库实现批量转换图片的例子:安装正常情况,只需 pip install PIL==1.1.7 或者 pip install Pillow==2.9.0 即可.但需留意安装后的输出安装完成后,需留意输出: *** TKINTER support no ...
  • CSS3实现动态翻牌效果仿百度贴吧3D翻牌一次动画特效
    CSS3实现动态翻牌效果仿百度贴吧3D翻牌一次动画特效
    本文主要分享一个利用CSS3新特性transform,实现3D翻牌的特效,有需要的小伙伴可以参考下.今天分享一个CSS3制作的翻牌效果,效果如下图所示,所过把把这个效果应用于相册肯定会很炫的.呵呵,超酷啊. 一.HTML代码: 因为是CSS3实现,所以大家可以看到没有任何的JS代码.ul为一组图片,每个li中有个a(因为我们希望可以跳转),a中包含两个div ...
猜你喜欢