当前位置:  编程技术>jquery

jquery 图片滚动效果的简单示例

    来源: 互联网  发布时间:2014-09-03

    本文导语:  本节内容: jquery实现图片滚动效果 例子:   代码示例:                   jquery 图片自动无缝滚动-www.                      ul,li { list-style: none;margin: 0; padding: 0;}        li { float: left;}        img...

本节内容:
jquery实现图片滚动效果

例子:
 

代码示例:



   
      
       jquery 图片自动无缝滚动-www.
      
      
       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;}
  
  
  
  

      
  

  

      
  

  
       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();//多个地方使用
       })
  
  
  
 

>>>查看更多Jquery 教程


    
 
 

您可能感兴趣的文章:

  • jQuery定时器插件 jQuery Timers应用示例
  • jquery打开dialog的简单示例
  • jQuery animate方法定位页面具体位置(示例)
  • jQuery设置input type值示例
  • jquery弹窗代码示例
  • jquery的父子兄弟节点查找示例代码
  • jquery获取第几个元素方法示例 jquery选择器
  • jquery遍历checkbox简单示例
  • jquery动态添加option示例
  • Jquery定时器的简单示例
  • JQuery获取上传文件大小(示例)
  • Jquery在指定DIV加载HTML示例代码
  • jQuery获得内容和属性示例代码
  • jQuery的each终止或跳过示例代码
  • jQuery获得内容和属性方法及示例
  • jquery根据name属性查找示例
  • jQuery find与children方法示例
  • jQuery回车键绑定点击事件示例
  • jQuery 滚动示例插件 kinetic
  • jQuery设置CSS属性(示例)
  • jQuery滚动效果插件 jQuery.SerialScroll
  • jQuery照明效果插件 jQuery Photon
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery盖章效果插件 jquery.stamper
  • jQuery卷页效果 jQuery Page Peel
  • 链接渐变效果 jQuery glow
  • jQuery的效果集工具包 Glimmer
  • jQuery Lightbox效果插件 Boxer
  • jQuery滚动延迟效果插件 AnimateScroll
  • jQuery电梯式滚动效果插件 Ascensor
  • jQuery 页面动画效果 Animsition
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery图片轮换插件 jQuery Dynamic Slideshow
  • jQuery图片预览插件 Jquery Fade In.Fade Out
  • jQuery图片自动放大插件 Greyscale Hover Effect w/ CSS & jQuery
  • jQuery 图片查看 jQuery.Imageview
  • jquery图片淡入淡出与图片切换效果的例子
  • jQuery图片展示插件 Simple Controls Gallery
  • jQuery图片展示插件 Zoomimage
  • jQuery图片显示插件 PrettyPhoto
  • jQuery图片预览插件 Exposure
  • jQuery图片展示插件 Galleria
  • jQuery图片预览插件 imgPreview
  • jQuery 图片库插件 simpleGal
  • jQuery图片标题插件 Captify
  • Jquery图片滚动插件 BxCarousel
  • jQuery图片滑动幻灯片插件 Orbit
  • jQuery图片展示插件 Pirobox
  • jQuery图片相册插件 Mosaiqy
  • jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
  • jQuery的图片画廊插件 jbgallery
  • jQuery 自适应图片 HiSRC
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3