如何编写jquery插件之轮播图
来源:互联网 发布:虚拟机ubuntu文件共享 编辑:程序博客网 时间:2024/05/16 19:07
对于一位合格的前端开发人员来说,首页图片轮播可谓是必会的基本功。那么我们聊一聊如何用jquery封装自己的轮播插件。
首先必须要聊到的jquery为我们提供的两大扩展方法,$.fn和$.extend(),$.extend相当于为jQuery类(注意,JavaScript并没有类,我们只是以类来理解这种做法)添加静态方法,
$.fn其实就是jQuery.prototype,原型,对于新手比较难解的概念,可以简单的理解为,我更改了印章,印章印出来的每个印记都会受到印章的影响,可谓釜底抽薪,JavaScript原型链相对较为复杂,JavaScript的继承特性便是基于原型实现的,在编写大规模的JavaScript代码的时候,以面向对象的方式编写才会显得有价值,我们在此不赘述。
好了,我们有了上述的知识储备,我们开始编写轮播插件。
<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="main.css" rel="stylesheet"> <script src="./js/jquery-1.10.2.min.js"></script> <script src="./js/jquery.slider.js"></script> <script src="./js/main.js"></script></head><body> <div class="slider"> <div class="slider_img"> <a class="slider-active" href="#" style="background: url(./img/nav1.jpg) 50% no-repeat; background-size: cover; opacity: 1;"></a> <a href="#" style="background: url(./img/nav2.jpg) 50% no-repeat; background-size: cover;"></a> <a href="#" style="background: url(./img/nav3.jpg) 50% no-repeat; background-size: cover;"></a> <a href="#" style="background: url(./img/nav4.jpg) 50% no-repeat; background-size: cover;"></a> <a href="#" style="background: url(./img/nav5.jpg) 50% no-repeat; background-size: cover;"></a> </div> <span id="left" class="arrow-icon"><<</span> <span id="right" class="arrow-icon">>></span> <div class="slider_icon"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div></body></html>这是HTML代码的结构,需要一个向左,一个向右按钮和对应轮播图片数目的icon按钮,建议大家用a标签设置图片的容器,比较好操作。
CSS我就不贴了,之后我会将其上传。
最重要的是JavaScript代码:
(function($) { $.fn.slider = function(options) { //this指向当前的选择器 var config = { index: 0, timer: null, speed: 3000, min: 0.3, //和css中的样式对应 max: 1 }; var opts = $.extend(config, options); //核心方法,把当前index的图片和icon显示,把除此之外的图片和icon隐藏 var core = function() { if (opts.index > 4) { opts.index = 0; } else if (opts.index < 0) { opts.index = 4; } $(".slider_icon span").eq(opts.index).addClass("active").siblings("span").removeClass("active"); $(".slider_img a").eq(opts.index).css("display", "block").stop().animate({ "opacity": opts.max }, 1000).siblings("a").css({ "display": "none", "opacity": opts.min }); }; //左边 $(this).find("#left").bind("click", function() { --opts.index; core(); }); //右边 $(this).find("#right").bind("click", function() { ++opts.index; core(); }); //每个icon分配事件 $(this).find(".slider_icon").on("click", "span", function() { var index = $(this).index(); opts.index = index; core(); }); //定时器 var start = function() { opts.timer = setInterval(function() { ++opts.index; core(); }, opts.speed); } $(this).hover(function() { clearInterval(opts.timer); }, function() { start(); }); start(); }}(jQuery));
1:core方法,其实图片轮播的本质就是把当前索引的图片显示,导航icon高亮,其余的隐藏,我做的是淡入淡出。
2:向左,向右,导航其实无非就是index的改变,jquery提供了一个index()方法,可以获得所有匹配元素中当前元素的索引,从0开始。
3:定时器,要实现图片的自动导航,无非就是每隔一定的时间,index+1。另外,当鼠标放入的时候,要清楚定时器,当输入移出的时候,再开启定时器。
以上三点就是轮播的核心要点,任何轮播图都不会脱离这个编程模式。
最后,小的奉上自己的轮播插件,忘大神轻喷。
0 0
- 如何编写jquery插件之轮播图
- 如何编写jquery插件
- 如何编写jQuery插件
- 【前端】jquery如何编写插件?
- 如何编写一个Jquery插件
- jQuery插件编写之我见
- jQuery - 小鸟系列之编写jQuery插件
- 如何理解 jQuery 的插件编写方式
- 如何编写自己的jquery插件
- 用jQuery编写轮播图插件
- 自己动手丰衣足食之征服jQuery插件编写
- jQuery-如何理解jQuery的插件编写方式
- web前端之锋利的jQuery十:编写jQuery插件
- 编写jquery扩展插件
- 编写jquery扩展插件
- JQuery编写插件
- jquery插件编写方法
- Jquery插件编写
- CentOS6.7下使用非root用户(普通用户)编译安装与配置mysql数据库并使用shell脚本定时任务方式实现mysql数据库服务随机自动启动
- RecycleView如何实现item的点击事件
- Timeout 时间已到。在操作完成之前超时时间已过或服务器未响应。
- win10、C语言、codeblocks、Mysql
- Wifi
- 如何编写jquery插件之轮播图
- OOA/OOD/OOP
- MyEclipse添加Server Runtime的tomcat
- PAT(B) 1013数素数(20)
- 高斯消元模板
- App Runtime for Chrome打破边界,Android开始侵入Windows系统
- CSS基础教程——纯CSS开发的气泡式提示框
- Three.js自定义相机旋转动画:沿圆弧旋转
- 数据结构实验之查找四:二分查找