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特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
php中上传文件的的解决方案
2018/09/25 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
利用JS实现数字增长
2016/07/28 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
点球小游戏python脚本
2018/05/22 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
Python上下文管理器全实例详解
2019/11/12 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
护理专业应届毕业生推荐信
2013/11/15 职场文书
经典安踏广告词
2014/03/21 职场文书
一岗双责责任书
2014/04/15 职场文书
初中同学会活动方案
2014/08/22 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
java多态注意项小结
2021/10/16 Java/Android
Python实现双向链表
2022/05/25 Python