类似于幻灯片的切换效果，有时需要在网页中完成一些图片的自动切换效果，比如广告，宣传，产品介绍之类的，那么单纯的切就没意思了，需要在切换的时候通过一些效果使得切换生动些。

比较常用之一的就是窗帘切换了。

先贴上完成的效果。

实现原理不复杂，在动的一条一条的称之为“窗帘条”或者是“strip”，每一个strip都是一个div，类似于雪碧图的方式将其背景图的位置设置为strip的可视位置，然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了。

为了使用方便，将这个功能作为jquery的插件方式进行编写。

插件名：bobenut.curtain.jquery.js

(function (jquery) {

    jquery.fn.curtain = function (options) {

        //TODO

    }

})(jQuery);

调用页面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style>

            #curtain {

                width: 800px;

                height: 600px;

                position: relative;

                overflow: hidden;

                margin:0 auto;

            }

        </style>

    </head>

    <body>

        <div id="curtain" >

            <img src="1.jpg"/>

            <img src="2.jpg"/>

            <img src="3.jpg"/>

            <img src="4.jpg"/>

        </div>

        <script type='text/javascript' src="jquery-1.11.3.min.js"></script>

        <script type='text/javascript' src="../src/bobenut.curtain.jquery.js"></script>

        <script type='text/javascript'>

            $('#curtain').curtain();

        </script>

    </body>

</html>

通过JQuery选择了包含图片的div后直接调用即可。

$('#curtain').curtain();

框架写完了，接下去进入初始化环节。

初始化包括：初始化尺寸、动画容器、被切换的图片，各个窗帘条的生成，默认背景，切换时用到的时间参数。

这些个初始化操作写在一个函数里显然会比较庞大，而且未来需要增加的功能都要动这么一个函数，显然不明智，那么就把他们按照初始化的职能进行拆分。

那么这么多初始化函数的调用就成了问题，难道要硬写每个函数进行独立调用？显然这种方式是很low的。

像这样每个函数都是具备相同的输入参数，都没有返回结果，那么可以说是相同形态的，可以采用迭代器设计模式进行调用。

所谓的迭代器就是顺序访问各元素，并且不用关心各元素的细节，其实就是循环访问，对于这些个初始化函数的调用我们就可以采用迭代器模式进行调用，下面各函数定义完后进行迭代器模式的调用。

初始化的结果肯定要找地方放，作为基本的环境上下文context供给后面的切换使用。

在本插件模块中定义个模块级的变量context。

所有初始化的结果都保存在context中。

var context = {};

接下来是各个初始化操作函数

1）初始化容器

    function initContainer(options) {

        context.$container = options.$container;

    }

容器就是包含一组图片的div，options是调用时传递进来的参数，因为这里的container是用jquery选择来的，所以加个$以示区分。

2）初始化尺寸

    function initSize(options) {

        context.stripCount = options.stripCount;

        context.containerWidth = options.width.replace('px', '');

        context.containerHeight = options.height.replace('px', '');

        context.stripWidth = context.containerWidth / context.stripCount;

        context.stripHeight = context.containerHeight;

    }

获取容器的大小，计算strip的大小。

3）初始化容器内的所有图片

    function initImgs(options) {

        context.imgSrcs = [];

        context.$container.children().each(function (index, element) {

            var $element = $(element);

            $element.css('display', 'none');

            context.imgSrcs.push($element.attr('src'));

        });

        context._imgCurrentIndex = 0;

        context.nextImgSrc = function () {

            if (++context._imgCurrentIndex > context.imgSrcs.length - 1) {

                context._imgCurrentIndex = 0;

            }

            return context.imgSrcs[context._imgCurrentIndex];

        };

    }

一上来了把需要切换的图片全部隐藏，并把他们的url保存在数组中以便于切换时使用。

提供一个获取下一张图片url的方法，使得在切换时能方便获取下一张图片的url。

4）初始化strip

    function initStrips(options) {

        context.$strips = [];

        for (var i = 0; i < context.stripCount; i++) {

            var $strip = jquery('<div></div>');

            $strip.css('background-size', context.containerWidth + 'px ' + context.containerHeight + 'px');

            $strip.css('background-position-x', i * context.stripWidth * -1 + 'px');

            $strip.css('background-position-y', '0px');

            $strip.css('background-repeat', 'no-repeat');

            $strip.css('position', 'absolute');

            $strip.css('left', (i * context.stripWidth) + 'px');

            $strip.css('top', context.stripHeight + 'px');

            $strip.css('width', context.stripWidth + 'px');

            $strip.css('height', context.stripHeight + 'px');

            $strip.css('display', 'block');

            $strip.css('overflow', 'hidden');

            $strip.css('zoom', '1');

            context.$strips.push($strip);

            context.$container.append($strip);

        }

    }

生成所有的strip，给她们设置默认的大小，将要切换的图设成背景图，通过background-position-x和y调整背景图的显示位置，然后将strip保存于数组中便于使用。

5）初始化默认背景

    function initDefaultBackground() {

        context.$container.css('background-image', 'url(' + context.imgSrcs[0] + ')');

        context.$container.css('background-size', context.containerWidth + 'px ' + context.containerHeight + 'px');

    }

默认将第一张图片作为容器的背景。

6）初始化切换时间参数

    function initTime(options) {

        context.interval = options.interval;

        context.baseDelay = options.baseDelay;

        context.delayIncrement = options.delayIncrement;

    }

设置前后图片的切换标准间隔时间interval，切换时每个strip的切换延迟时间和延迟增量时间。

各个初始化函数完成，接下来采用迭代器模式对各个初始化函数进行调用。

    function init(options) {

        var initFuncs = [initContainer, initSize, initImgs, initStrips, initDefaultBackground, initTime];

        for (var i = 0, f; f = initFuncs[i++];) {

            f(options);

        }

    }

在这里，按照各初始化函数的优先级，把他们放到一个数组中，通过循环这个数组，对每一个函数进行调用，好处就是，新加一个初始化函数的时候，只需往数组的末尾添加即可，甚至可以把初始化函数数组定义到外部，这样，init函数就符合开闭原则了。

jquery有一种更高大上的迭代处理方法就是each，那么就对init函数略加修改。

    function init(options) {

        var initFuncs = [initContainer, initSize, initImgs, initStrips, initDefaultBackground, initTime];

        jquery.each(initFuncs,function(i,f){

            f(options);

        });

    }

each函数的第一个参数是被迭代的对象或数组，第二个参数是迭代每一个元素时的处理回调函数，好处就是，循环的事您就别管了，只关心处理。

至此，初始化函数的定义完成。

为了完成init函数的调用，需要考虑生成默认的options，因为外部可以不传递任何参数。

然后完成对init函数的调用。

    function setDefaultOptions(options, $container) {

        options = options || {};

        options.$container = $container;

        options.width = options.width || '800px';

        options.height = options.height || '600px';

        options.stripCount = options.stripCount || 10;

        options.interval = options.interval || 2;

        options.baseDelay = options.baseDelay || 400;

        options.delayIncrement = options.delayIncrement || 80;

        return options;

    }

    jquery.fn.curtain = function (options) {

        init(setDefaultOptions(options, this));


    }

通过setDefaultOptions函数负责确保各个必须的参数都有默认值。

然后将规整过的options作为init的输入，对init函数进行调用。

至此，通过迭代器的设计模式完成了各个初始化函数的定义和调用。

下一篇继续：《javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）》

代码：戳

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）的更多相关文章

  1. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  2. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  3. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  4. javascript---简介的切换图片效果。

    <!--切换图片--> <img src="img/9.gif" alt="" id="img"> <butt ...

  5. Go语言设计模式实践：迭代器（Iterator）

    关于本系列 决定开个新坑. 这个系列首先是关于Go语言实践的.在项目中实际使用Go语言也有段时间了,一个体会就是不论是官方文档.图书还是网络资料,关于Go语言惯用法(idiom)的介绍都比较少,基本只 ...

  6. javascript设计模式实践之策略模式--输入验证

    策略模式中的策略就是一种算法或者业务规则,将这些策略作为函数进行封装,并向外提供统一的调用执行. 先定义一个简单的输入表单: <!DOCTYPE html> <html> &l ...

  7. javascript设计模式实践之代理模式--图片预加载

    图片的预加载就是在加载大图片前,先显示一个loading.gif,就算在网络比较慢的时候也能让人知道正在加载,总比啥反应都没有强. 下面这段代码就是预加载的一个简单的实现,假设先不处理加载图片时的on ...

  8. javascript设计模式学习之七——迭代器模式

    一.迭代器模式定义 迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素,并且不需要暴露该对象的内部表示. 在当前大部分语言中,都已经内置了迭代器模式.迭代器有内部迭代器和外部迭代器之分,一般现有语 ...

  9. javascript 设计模式实践之策略模式--输入验证

    博客地址:http://www.cnblogs.com/kongxianghai/p/4985122.html,写的挺好的推荐下!

随机推荐

  1. C#_基础：委托速讲

    1定义:委托=函数指针 C# public delegate void Test(string str); 等价C++ public void (*Test)(string str): 委托赋值(初始 ...

  2. SQL Server 变更数据捕获（CDC）监控表数据

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 实现过程(Realization) 补充说明(Addon) 参考文献(References) ...

  3. Unit Testing with NSubstitute

    These are the contents of my training session about unit testing, and also have some introductions a ...

  4. Android学习——windows下搭建NDK_r9环境

    1. NDK(Native Development Kit) 1.1 NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP功能开发的工具,通过这个 ...

  5. 每天一个linux命令(25)：linux文件属性详解

    Linux 文件或目录的属性主要包括:文件或目录的节点.种类.权限模式.链接数量.所归属的用户和用户组.最近访问或修改的时间等内容.具体情况如下: 命令: ls -lih 输出: [root@loca ...

  6. 2013 duilib入门简明教程 -- 复杂控件介绍 (13)

      首先将本节要介绍的控件全部拖到界面上,并调整好位置,如图:           然后将Name属性改成其他名字,          不能是[控件名+UI+数字]这种,因为这是DuiDesigner ...

  7. WebDriver--操控浏览器

    前一篇讲述了元素的定位方法,现在开始练习如何写自动化测试脚本 我使用的编辑工具是PyCharm,今后该博客中所写的有关Python脚本,都是在该工具中编写的. WebDriver提供了控制浏览器大小. ...

  8. Spring注入JPA+JPA事务管理

    本例实现的是Spring注入JPA 和 使用JPA事务管理.JPA是sun公司开发的一项新的规范标准.在本质上来说,JPA可以看作是Hibernate的一个子集:然而从功能上来说,Hibernate是 ...

  9. CSS系列：CSS中盒子的浮动与定位

    1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...

  10. Hibernate的数据查找，添加！

    1.首先看一下测试数据库的物理模型 2.测试所需要的Hibernate的jar包 3.数据库的sql /*=============================================== ...