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

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

先贴上完成的效果。

实现原理不复杂，在动的一条一条的称之为“窗帘条”或者是“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. .NET面试题系列[15] - LINQ：性能

    .NET面试题系列目录 当你使用LINQ to SQL时,请使用工具(比如LINQPad)查看系统生成的SQL语句,这会帮你发现问题可能发生在何处. 提升性能的小技巧 避免遍历整个序列 当我们仅需要一 ...

  2. 从Facebook跑来阿里的赵海平大叔，你要干啥？

    赵海平在今年三月份来到阿里,听毕玄(他现任主管)说去年五六月份就跟赵海平聊上了.有人问:为啥 BAT 三大巨头,你看中了阿里巴巴?在今天现场达一千多人的分享中赵海平给出了回复:“因为百度和腾讯没找我呗 ...

  3. JSP模板继承功能实现

    背景 最近刚入职新公司,浏览一下新公司项目,发现项目中大多数JSP页面都是独立的.完整的页面,因此许多页面都会有如下重复的代码: <%@ page language="java&quo ...

  4. .NET 基础 一步步 一幕幕 [注释、命名规则、访问修饰符、数据类型、常量、变量]

    注释.命名规则.访问修饰符.数据类型.常量.变量 话说一个不会写注释的程序猿的不是一个好吃货,我们本篇就从注释开始说起好了. 在C#中有三种注释: 第一种:单行注释  以//开头,后面的就是注释内容 ...

  5. [python] 安装numpy+scipy+matlotlib+scikit-learn及问题解决

    这篇文章主要讲述Python如何安装Numpy.Scipy.Matlotlib.Scikit-learn等库的过程及遇到的问题解决方法.最近安装这个真是一把泪啊,各种不兼容问题和报错,希望文章对你有所 ...

  6. Android开发学习之路-带文字的图片分享

    有用过微信分享SDK的都应该知道,微信分享到朋友圈的时候是不能同时分享图片和文字的,只要有缩略图,那么文字就不会生效.那么问题就来了,如果我们想把APP内的某些内容连带图片一起分享到微信,是不是没办法 ...

  7. PDO 数据访问抽象层

    1.操作其它数据库 (1)造对象 $dsn = "mysql:dbname=test3;host=localhost"; //数据源:两个参数:数据库驱动,链接数据库 $pdo = ...

  8. 1代 angularjs ember vue 比较

    angularjs ember vue 比较 看了别人的ppt,直接贴结果,仅供参考

  9. Python标准库的threading.Thread类(转自别人的翻译)

    这个类表示在单独的控制线程中运行的活动.有两种方法可以指定这种活动,给构造函数传递回调对象,或者在子类中重写run() 方法.其他方法(除了构造函数)都不应在子类中被重写.换句话说,在子类中只有__i ...

  10. 无法在“EntityFramework”已存在的情况下创建影像复制该文件的解决方案

    问题产生的原因:你项目正在生成中你就打开浏览器预览了,导致这个问题解决方案:右击重新生成项目,等生成后再打开 “/”应用程序中的服务器错误. 无法在“EntityFramework”已存在的情况下创建 ...