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


Posted in Javascript onNovember 23, 2013
<!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>
Javascript 相关文章推荐
JQuery 选择器 xpath 语法应用
May 13 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
javascript快速排序算法详解
Sep 17 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
js图片向右一张张滚动效果实例代码
Nov 23 #Javascript
JavaScript实现简单的时钟实例代码
Nov 23 #Javascript
JS控制日期显示的小例子
Nov 23 #Javascript
Jquery 动态循环输出表格具体方法
Nov 23 #Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 #Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 #Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 #Javascript
You might like
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python制作填词游戏步骤详解
2019/05/05 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
C++面试题目
2013/06/25 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
公司人力资源的自我评价
2014/01/02 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书