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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 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
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
Javascript复制实例详解
2016/01/28 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
python微信撤回监测代码
2019/04/29 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
同学会邀请书大全
2014/01/12 职场文书
自荐信需注意事项
2014/01/25 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
留学顾问岗位职责
2014/04/14 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
运动会广播稿50字
2015/08/19 职场文书
小学中队长竞选稿
2015/11/20 职场文书