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 代码的方法小结
Jul 16 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
javascript 事件绑定问题
Jan 01 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
javascript常用对话框小集
Sep 13 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
js实现简单的秒表
Jan 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
一个查看session内容的函数
2006/10/09 PHP
PHP 图片文件上传实现代码
2010/12/29 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python中的取模运算方法
2018/11/10 Python
详解python-图像处理(映射变换)
2019/03/22 Python
python中添加模块导入路径的方法
2021/02/03 Python
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
通用C#笔试题附答案
2016/11/26 面试题
兼职业务员岗位职责
2014/01/01 职场文书
医学生个人求职信范文
2014/02/07 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
初中教师个人工作总结
2015/02/10 职场文书
管辖权异议上诉状
2015/05/23 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
Python自动化实战之接口请求的实现
2022/05/30 Python
Python first-order-model实现让照片动起来
2022/06/25 Python