jQuery简单自定义图片轮播插件及用法示例


Posted in Javascript onNovember 21, 2016

本文实例讲述了jQuery简单自定义图片轮播插件及用法。分享给大家供大家参考,具体如下:

经常使用别人的插件,现在自己写一个,纪念一下。

jQuery.banner.js:

/*
* banner 0.1
* 使用banner 实现图片定时切换 鼠标经过停止动画
* 鼠标离开,继续动画
*/
;(function($){
  $.fn.banner =function(options){
    //各种属性和参数
    var defaults ={
       picWidth:"1000",
      picHeight:"300",
      speed:"1500"
    };
    var totalW = 0;  //保存总的动画宽度
    var timer = null; //保存定时器
    var current = 0; //保存当前动画到第N张图,下次从这里开始
    var totalNum = 0; //保存总的图数
    var Dsqtime = 0; //定义定时器时间 【外传参数】
    var Dhtime = 0;  //定义动画时间
    var count = 0 ;
    //合并多个对象为一个,即有新参数 用新的,否则用默认的
    var options = $.extend(defaults, options);
    this.each(function(){
      //实现代码
      var __this = $(this);
      Dsqtime = options.speed;
      Dhtime = Dsqtime/3;
      //初始化
      init(__this);
      //调用动画
      show(__this, options.picWidth,current);
      //鼠标经过时事件
      __this.find('ul li').bind('mouseover',function(){
        window.clearInterval(timer); //清除定时器
      });
      __this.find('ul li').bind('mouseout',function(){
        show(__this, options.picWidth,current);
         //接着上一次动画轮播
      });
    });
    //初始化 设定父容器宽度
    function init(obj){
      obj.find('ul li').each(function(){
         totalW += $(this).width();
         totalNum++;
       });
      obj.find('ul').width(totalW);
    }
    //开始动画显示
    function show(obj, width, current){
      timer = setInterval(function(){
      obj.find('ul').animate({'margin-left':'-'+count*width+'px'},
         Dhtime);
          current = count;
          count++;
          if(count == totalNum){
           count =0;
          }
       }, Dsqtime);
    }
  };
})(jQuery);

html代码:

<!doctype html>
<html>
 <head>
   <meta charset="utf8"/>
   <script type="text/javascript" src="./js/jquery.min.js"></script>
   <script type="text/javascript" src="./js/jquery.banner.js"></script>
   <script type="text/javascript">
     $(document).ready(function(){
       $('.wrap').banner({
        picWidth:"1000",
        picHeight:"300",
        speed:"6000"
       });
     });
   </script>
   <style type="text/css">
     *{margin:0;padding:0;}
     .wrap{width:1000px; height:300px; overflow:hidden; margin:0 auto;}
     .wrap ul li{float:left; list-style:none;}
     .wrap ul li img{width:1000px;height:300px;}
     .clear{clear: both;}
   </style>
 </head>
 <body>
   <div>
    <div class="wrap">
      <ul>
        <li><a href="#"><img src="./images/1.jpg"/></a></li>
        <li><a href="#"><img src="./images/2.jpg"/></a></li>
        <li><a href="#"><img src="./images/3.jpg"/></a></li>
        <li><a href="#"><img src="./images/4.jpg"/></a></li>
        <li><a href="#"><img src="./images/5.jpg"/></a></li>
      </ul>
      <div class="clear"></div>
    </div>
   </div>
 </body>
</html>

效果图:

jQuery简单自定义图片轮播插件及用法示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
JS实现简易留言板特效
Dec 23 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 #Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 #Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 #Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 #Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 #Javascript
js原生实现FastClick事件的实例
Nov 20 #Javascript
常用原生js自定义函数总结
Nov 20 #Javascript
You might like
PHP操作文件方法问答
2007/03/16 PHP
php引用传值实例详解学习
2013/11/06 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
动态表格Table类的实现
2009/08/26 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python的装饰器用法学习笔记
2016/06/24 Python
详解python Todo清单实战
2018/11/01 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
罗技美国官网:Logitech美国
2020/01/22 全球购物
关于圣诞节的广播稿
2014/01/26 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
师范生自我鉴定
2014/03/20 职场文书
文明工地标语
2014/06/16 职场文书
人民调解协议书范本
2014/10/11 职场文书
小学生优秀评语
2014/12/29 职场文书
教师个人学习总结
2015/02/11 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
django上传文件的三种方式
2021/04/29 Python
超详细Python解释器新手安装教程
2021/05/10 Python
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android