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 相关文章推荐
html超链接打开窗口大小的方法
Mar 05 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 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命令行使用方法和命令行参数说明
2014/04/08 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
php实现的农历算法实例
2015/08/11 PHP
一行代码告别document.getElementById
2012/06/01 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
浅析JavaScript动画
2015/06/10 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Django开发中的日志输出的方法
2018/07/02 Python
python实现车牌识别的示例代码
2019/08/05 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
小班上学期评语
2014/05/05 职场文书
群众路线剖析材料
2014/09/30 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
社区低保工作总结2015
2015/07/23 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang