《beginning jquery》是一本很不错的学习jquery的书,作者的讲解深入浅出,很适合初学者,在最后一章里面,作者把前面所有的点结合起来完成了一个轮播图的jquery插件。实现了自动播放,键盘和鼠标控制。但是,借助jquery的自定义事件来优化这个插件,可以使逻辑更清楚。

效果图

首先贴一下作者(Jack Franklin)的原程序:

(function($) {
$.fn.slider = function(options) {
var defaults = {duration: };
var settings = $.extend({}, defaults, options);
return this.each(function() { // store some initial variables
var $slider = $(this);
var $sliderList = $slider.children("ul");
var $sliderItems = $sliderList.children("li");
var $allButtons = $slider.find(".button");
var imageWidth = $sliderItems.first().children("img").width();
var $buttons = {
forward: $allButtons.filter(".forward"),
back: $allButtons.filter(".back")
};
var endMargin = -(($sliderItems.length - ) * $sliderItems.first().children("img").width());
var animateSlider = function(direction, callback) {
$sliderList.stop(true, true).animate({
"margin-left" : direction + "=" + imageWidth },
settings.duration,
callback);
var increment = (direction === "+" ? -1 : );
updateIndex(currentIndex + increment);
};
var animateSliderToMargin = function(margin, callback) {
$sliderList.stop(true, true).animate({"margin-left": margin}, settings.duration, callback);
};
var getLeftMargin = function() {
return parseInt($sliderList.css("margin-left"), );
};
var isAtBeginning = function() {
return getLeftMargin() === ;
};
var isAtEnd = function() {
return getLeftMargin() === endMargin;
}; var updateIndex = function(newIndex) {
currentIndex = newIndex;
$index.text(currentIndex);
};
var triggerSlider = function(direction, callback) {
var isBackButton = (direction === "+");
if(!isBackButton && isAtEnd()) {
animateSliderToMargin(, callback);
updateIndex();
}
else if(isBackButton && isAtBeginning()) {
animateSliderToMargin(endMargin, callback);
updateIndex(totalImages); }
else {
animateSlider(direction, callback);
}
};
$allButtons.on("click", function(event) {
var isBackButton = $(this).hasClass("back");
triggerSlider((isBackButton? "+" : "-"));
event.preventDefault();
});
$(document.documentElement).on("keyup", function(event) {
if(event.keyCode === ) {
triggerSlider("+");
}
else if (event.keyCode === ) {
triggerSlider("-");
}
});
});
};
})(jQuery);

这里没有添加键盘事件和自动播放功能,实现了鼠标点击back和forward按钮使图片滚动。当到达最后一张时,点击forward会回到第一张;当第一张图片显示并点击back按钮时,则会显示最后一张,从而实现循环滚动。通过读代码可以看出,作者定义了比较多的函数来实现这个过程。定义的相关函数有:

判断图片位置函数:

isAtBeginning(),
isAtEnd()

DOM函数和动画函数:

animateSliderToMargin(),
updateIndex()

事件处理函数

triggerSlider()

作者的思路是click首先触发图片移动事件,然后再更新索引,但是换一种方式考虑:

1.前进后退两个按钮只控制index的变化。就是只控制一个number的增加和减小。

2.将索引变化看作一个事件,当索引发生变化时相应的margin-left便可以计算出来。

3再通过自定义事件,当索引发生变化时,触发(indexChange)事件,改变slider元素的margin-left值。实现图片的切换。

这样所有逻辑都会在操作index这个数上面,而图片切换只是响应index的变化。这样逻辑上会更清晰,也容易写出更简单紧凑的代码。如下:

(function($) {
$.fn.slider = function(options) {
var defaults = {duration:,direction:'left',animationDelay: };
var settings = $.extend({}, defaults, options);
return this.each(function() {
var $slider = $(this),
$sliderList = $slider.children("ul"),
$sliderItems = $sliderList.children("li"),
$itemLen=$sliderItems.length,
$allButtons = $slider.find(".button"),
$forward= $allButtons.filter(".forward"),
$back=$allButtons.filter(".back"),
$counter=$('#counter'),
counter= ,
type='margin-'+settings.direction,
timer=null,
imageWidth=$sliderItems.find('img').width();
//-----------------------------jquery Map----------------------------- //-----------------------------utility method-----------------------------
function counterToMargin(count){
return (-count)*imageWidth;
}
function sliderWay(){
var obj={};
obj[type]=counterToMargin(counter);
return obj;
}
function counterChange(flag){
if(flag==='+'){
counter<$itemLen?(counter++):counter=;
}
else if(flag==='-'){
counter>?(counter--):counter=$itemLen;
}
} var automaticSlide = function() {
timer=setTimeout(function () {
counterChange('+');
$sliderList.trigger('counterChange');
automaticSlide();
},settings.animationDelay);
};
timer =setTimeout(automaticSlide,settings.animationDelay);
var resetTimer = function() {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(automaticSlide, );
};
//-----------------------------event methods----------------------------
$sliderList.on('counterChange',function(){
resetTimer();
var $this=$(this);
$this.stop(true,true).animate(sliderWay(),settings.duration);
showCounter();
});
$forward.on('click',function(){
counterChange('+');
$sliderList.trigger('counterChange');
});
$back.on('click',function(){
counterChange('-');
$sliderList.trigger('counterChange');
});
$(document.documentElement).on("keyup", function(event) {
if(event.keyCode === ) { //left arrow
$back.trigger("click"); }
else if (event.keyCode === ) { //right arrow
$forward.trigger("click"); }
});
//-----------------------------dom methods----------------------------
function showCounter(){
$counter.html(counter);
}
});
};
})(jQuery);
当然,这个插件还远远不够成熟,理想状况下,给出容器元素,在对容器元素调用插件时传入图片url数列就可以实现slider功能,才算一个比较成熟的插件。这里只是提供一种组织代码思路。
demo

跟着《beginning jquery》学写slider插件并借助自定义事件改进它的更多相关文章

  1. jQuery 的自定义事件

    jQuery  中,想要自动触发自定义事件,必须满足2个条件: 1.事件必须是通过on 来绑定的. 2.事件必须是通过trigger / triggerHandler 来触发. 格式如下: $(fun ...

  2. 自己写一个jQuery垂直滚动栏插件(panel)

    html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...

  3. 跟我一起学写jQuery插件开发方法(转载)

    jQuery如此流行,各式各样的jQuery插件也是满天飞.你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧!     很 ...

  4. 学写jQuery插件开发方法

    jQuery如此流行,各式各样的jQuery插件也是满天飞.你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧!   很多公 ...

  5. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  6. 基于Bootstrap的炫酷jQuery slider插件

    简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...

  7. 【jQuery】结合accordion插件分析写插件的方法及注意事项

    1.jQuery插件的命名方式:jquery.[插件名].js 2.对象方法附加在jQuery.fn上,全局函数附加在jQuery对象本身上 3.插件内部this指向的是通过选择器获取的jQuery对 ...

  8. 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  9. slider插件制作轮播图

    html代码: <div id="banner_tabs" class="flexslider"> <ul class="slide ...

随机推荐

  1. C#开发微信门户及应用(23)-微信小店商品管理接口的封装和测试

    在上篇<C#开发微信门户及应用(22)-微信小店的开发和使用>里面介绍了一些微信小店的基础知识,以及对应的对象模型,本篇继续微信小店的主题,介绍其中API接口的封装和测试使用.微信小店的相 ...

  2. JavaWeb_day08_EL JSTL

    本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! day08 EL JSTL EL表达式 语法:${} ...

  3. FPGA旋转编码器的实现

    module pmodenc( clk, rst_n, A, B, BTN,// A_Debounce,// B_Debounce,// BTN_Debounce,// Rotary_right,// ...

  4. 浅谈Angular的 $q, defer, promise

    浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00  博客园-原创精华区 原文  http://www.cnblogs.com/big-snow/ ...

  5. 常用原生JS方法

    备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了... ①添加事件方法 1 2 3 4 5 6 7 8 9 addHandler:function(elemen ...

  6. AlloyRenderingEngine文本框组件

    写在前面 Github: https://github.com/AlloyTeam/AlloyGameEngine 在dom元素里,自带了input标签,设置其type为text,它就是一个文本框. ...

  7. Dynamics CRM 之ADFS 使用 SQL Server 的联合服务器场

    此拓扑用于 Active Directory 联合身份验证服务 (AD FS) 不同于使用 Windows 内部数据库 (WID) 部署拓扑,因为不会将数据复制到每台联合服务器场中的联合身份验证服务器 ...

  8. win2003 Enterprise x64 Edtion中的DCOM服务找不到WORD应用程序

    打开注册表,找到以下健值 HKEY_CLASSES_ROOT\AppID\{00020906-0000-0000-C000-000000000046} HKEY_CLASSES_ROOT\CLSID\ ...

  9. css 垂直居中

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. html框架练习

    <html><frameset  rows="50,*" ><frame name="main" src="/examp ...