jQuery实现轮播切换以及将其封装成插件(3)
在前两篇博文中,我们写了一个普通的轮播切换。但是我们不能每一次需要这个功能就把这些代码有重新敲一次。下面我们就将它封装成一个插件。
至于什么是插件,又为什么要封装插件,不是本文考虑的内容。
我们趁着刚才的思路还在,直接开始写。
一、jQuery插件的基本结构:
我只介绍本例中用到的一种插件:
(function($){
$.fn.extend({
"插件函数名(随意)":function(){
//函数内容 }
});
})(jQuery);
二、要做哪些准备
按照我的个人习惯。首先需要前面博文中我们写的html代码作为模板。使用jQuery动态生成它。
然后将涉及到的CSS式样,放入单独的文件。最后将js函数放入上面的插件函数中,作为函数中的函数。
;(function($){
$.fn.extend({
"mySlider":function(){
if(!this.hasClass("gr_UI_sliderBox")){
console.log("this dom not have class gr_UI_sliderBox");
return;
} //be sure only once and add ul.
var $sliderUl = this.find("ul");
if($sliderUl.length>=1){
return;
} var $add = $("<ul class='img_ul'><li class='slider_Item_1'></li><li class='slider_Item_2'></li><li class='slider_Item_3'></li></ul><ul class='btn_ul'><li></li><li></li><li></li></ul>");
$(this).append($add); function moveByIndex(index){ $(".gr_UI_sliderBox ul.img_ul li.slider_current").removeClass("slider_current");
$(".gr_UI_sliderBox ul.img_ul li:eq(" + index + ")").addClass("slider_current");
var move_x = -index * 800;
var str_m_x = move_x + "px";
var $sliderUl = $(".gr_UI_sliderBox ul.img_ul");
$sliderUl.animate({left: str_m_x}, "slow");
$(".gr_UI_sliderBox ul.btn_ul li:eq(" + index + ")").addClass("current_btn").siblings().removeClass("current_btn");
} function s_Run(){
var newCurrentIndex = $(".gr_UI_sliderBox ul.img_ul li.slider_current").index() + 1;
var liCount = $(".gr_UI_sliderBox ul.img_ul li").length;
if(newCurrentIndex >= liCount){
newCurrentIndex = 0;
}
console.log("new index : " + newCurrentIndex + " length : " + liCount);
moveByIndex(newCurrentIndex);
} } });
这样,我们就可以通过mySlider函数动态生成轮播切换。
但是,就以目前的代码,是不包括事件的。注意在插件函数中是不能使用ready()的。我们可以自己初始化,并且绑定事件和函数。
//init
var tCtr;
$(".gr_UI_sliderBox ul.img_ul li:eq(0)").addClass("slider_current");
$(".gr_UI_sliderBox ul.btn_ul li:eq(0)").addClass("current_btn");
//绑定事件
$(".gr_UI_sliderBox ul.btn_ul li").bind({
mouseenter:function(){
clearTimeout(tCtr);
moveByIndex($(this).index());
},
mouseleave:function(){
tCtr = setInterval(s_Run, 2000);
} }); tCtr = setInterval(s_Run, 2000);
我们完成了插件的编写,但是我们要如何使用呢?
下面我们来调用它。
我们将所需要的文件(插件.js和插件.css)配置到工程中。在需要使用的地方定义一个<div></div>
<div class="gr_UI_sliderBox" id="test"></div>
在上面的代码中,gr_UI_sliderBox就是我们的插件类。然后再ready()中调用我们的生成“轮播”的插件函数:
$(document).ready(function(){
$("#test").mySlider();
});
这样,刷新页面后我们就生成了,和上一篇博文中一模一样的自定义控件了。
通过这三篇博文,我们完成了一个轮播切换功能的编写。
写的不好,献丑了。
jQuery实现轮播切换以及将其封装成插件(3)的更多相关文章
- jQuery实现轮播切换以及将其封装成插件(1)
我们在网上经常会看到一些轮播切换的效果.轮播切换,就是在一个有限的空间中定时的像走马灯一样去播放一组图片,当然也可以通过鼠标悬停在小按钮上来切换显示.下面我们将一步一步的实现这一效果. 为保证效果,请 ...
- jQuery实现轮播切换以及将其封装成插件(2)
在上一篇博文中,我们完成了一个简单的轮播切换.它的功能比较简单,仅仅能定时切换图片. 但是有没有这样一种情况.当我们特意的想看某一个轮播显示项时不希望等轮播一圈才能等到,希望通过图上的一些元素,触发某 ...
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
- 基于jquery带时间轴的图片轮播切换代码
基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="decoroll2 ...
- jQuery - 广告图片轮播切换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- 3D轮播切换特效 源码
这个3D轮播切换特效是我2017年2月份写的 当初我 刚接触HTML不久,现在把源码分享给大家 源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范 每个浏览器 ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- CSS+jQuery实现轮播
CSS+jQuery实现轮播 CSS jQuery 前端 实现功能: 自动轮播: 鼠标放在上面停止轮播: 鼠标放在上面显示左右切换的按钮: 鼠标放在小圆圈上显示对应的图片: 轮播效果图 style. ...
随机推荐
- 多线程读写shared_ptrshared_ptr要加锁分析!学习笔记
(shared_ptr)的引用计数本身是安全且无锁的,但对象的读写则不是,“因为 shared_ptr 有两个数据成员,读写操作不能原子化".使得多线程读写同一个 shared_ptr 对 ...
- 运行结果:Spring Bean的生命周期
详见:http://www.cnblogs.com/zrtqsk/p/3735273.html https://blog.csdn.net/qq_23473123/article/details/76 ...
- Unity Resources.Load
GameObject bulletPrefab; void Start() { bulletPrefab = Resources.Load("bulletPrefab") a ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
- 07-spring之三大框架的整合
1 三大框架整合理论 2 导包(42个) 1 hibernate 1 hibernate/lib/required 2 hibernate/lib/jpa | java persist api jav ...
- RSA算法、SSL协议学习笔记
最近学习计算机网络,涉及到SSL协议,我想起了去年密码学课程讲过的非对称加密RSA算法,结合阮老师的博客,写写学习笔记,这里再回忆一下. RSA算法 RSA算法是一种非对称密码算法,所谓非对称,就是指 ...
- Python常用模块一
一. os模块 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cd ...
- Android 修改TabLayout底部导航条Indicator的长短
关于Tablayout,使用的应该很频繁了,但是底部导航条长短是固定死的,需要自己来改动长短,找了半天没找着方法,看了下官方建议,可以通过映射来修改自己想要的长短,其实也就几行代码的问题,看代码: p ...
- APK加固之静态脱壳机编写入门
目录: 0x00APK加固简介与静态脱壳机的编写思路 1.大家都知道Android中的程序反编译比较简单,辛苦开发出一个APK轻易被人反编译了,所以现在就有很多APK加固的第三方平台,比如爱加密和梆梆 ...
- python socket练习
服务器端 #服务器端 import socket server = socket.socket() server.bind(('localhost',6969))#绑定要监听的端口 server.li ...