首页经常是需要一个焦点图切换的效果，最近做的项目也正好需要，所以在网上搜索，后面查到了一个半成品的插件，这里我自己修改了一下。

js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js，前面一个是我改写的，第二个是原作者的文件。下图是效果图：

一、静态效果

<div class="slide_wrap">
    <ul id="slides2" class="slide">
        <li style="background:url('images/01.jpg') no-repeat center top"><a href="http://www.cnblogs.com/strick/" target="_blank">pwstrick1</a></li>
        <li style="background:url('images/02.jpg') no-repeat center top"><a href="http://www.cnblogs.com/strick/" target="_blank">pwstrick2</a></li>
        <li style="background:url('images/03.jpg') no-repeat center top"><a href="http://www.cnblogs.com/strick/" target="_blank">pwstrick3</a></li>
        <li style="background:url('images/04.jpg') no-repeat center top"><a href="http://www.cnblogs.com/strick/" target="_blank">pwstrick4</a></li>
    </ul>
</div>

1.现在比较流行宽屏的焦点图切换，以前标签都是用img来显示图片的，现在得换成background做背景图，这样就不会出现横向滚动条啦。

2.最外面套个slide_wrap用来做限制里面图片的绝对定位

3.ul中的class原先我是在插件初始化的时候添加上去的，现在我预先就加上了，显示效果比后面添加要好一点，大家可以在改写插件的时候做修改

.slide_wrap {width:100%;height:400px;position:relative}
.slide_wrap .slide { display:block; width:100%; height:400px; list-style:none; padding:0; margin:0; position:relative;}
.slide_wrap .slide li { display:block; width:100%; height:100%; list-style:none; padding:0; margin:0; position:absolute;}
.slide_wrap .slide li a { display:block; width:100%; height:100%; text-indent:-9999px;}
.slide_wrap .pagination { display:block; list-style:none; position:absolute; left:50%; top:340px; z-index:9900;padding:5px 15px 5px 0; margin:0}
.slide_wrap .pagination li { display:block; list-style:none; width:10px; height:10px; float:left;margin-left:15px; border-radius:5px; background:#FFF }
.slide_wrap .pagination li a { display:block; width:100%; height:100%; padding:0; margin:0;  text-indent:-9999px;outline:0}
.slide_wrap .pagination li.current { background:#0092CE}

1、slide_wrap与slide中的height属性可以根据实际情况修改

2、pagination是图中的按钮样式，用来控制显示第几张图，也是绝对定位left与top可以根据实际情况修改

3、样式中的各个颜色也可以根据想要的效果做个性化修改

4、上面的样式写的有点啰嗦，在嵌入自己的项目中，可以适当精简

二、调用方式

<script type="text/javascript">
    $('#slides2').jslide();
</script>

1、将ul设置成焦点图插件

2、下面的各个操作都将围绕着ul转

三、jQuery插件通用格式

;(function (factory) {
    'use strict';
    // Register as an AMD module, compatible with script loaders like RequireJS.
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    }
    else {
        factory(jQuery);
    }
}(function ($, undefined) {
    'use strict';
　　 //中间插件代码
    $.fn.jslide = function (method) {
        return _init.apply(this, arguments);
    };
}));

1、第一个分号是为了防止在与其他代码压缩到一起的时候合在一行中，这样会出现语法错误。例如var i=0(function(factory){......}(..);

2、'use strict'是开启严格模式，使Javascript解释器可以用"严格"的语法来解析代码，以帮助开发人员发现错误

3、如果使用了requirejs模块载入框架，define(['jquery'], factory)这句就是让插件支持AMD规范

4、function ($, undefined) 这里面的undefined是为了防止在引入其他js文件的时候，使用被重写了的undefined

5、_init是用于初始化效果

四、插件初始化

var defaults = {
        speed : 3000,
        pageCss : 'pagination',
        auto: true //自动切换
    };
    var nowImage = 0;//现在是哪张图片
    var pause = false;//暂停
    var autoMethod;
　　/**
     * @method private
     * @name _init
     * @description Initializes plugin
     * @param opts [object] "Initialization options"
     */
    function _init(opts) {
        opts = $.extend({}, defaults, opts || {});
        // Apply to each element
        var $items = $(this);
        for (var i = 0, count = $items.length; i < count; i++) {
            _build($items.eq(i), opts);
        }
        return $items;
    }

1、defaults是暴露出来的自定义参数，这里我就写了三个自动切换的速度、选择按钮样式、是否自动化

2、三个全局参数，nowImage是当前显示图片的序号、pause是控制图片是切换还是暂停，autoMethod是定时函数的编号

3、_init中有合并自定义参数，调用_build做创建操作

五、创建插件各个操作

/**
     * @method private
     * @name _getSlides
     * @description 获取幻灯片对象
     * @param $node [jQuery object] "目标对象"
     */
    function _getSlides($node) {
        return $node.children('li');
    }
     /**
     * @method private
     * @name _build
     * @description Builds each instance
     * @param $node [jQuery object] "目标对象"
     * @param opts [object] "插件参数"
     */
    function _build($node, opts) {
        var $slides = _getSlides($node);
        $slides.eq(0).siblings('li').css({'display':'none'});
        var numpic = $slides.size() - 1;
        $node.delegate('li', 'mouseenter', function() {
            pause = true;//暂停轮播
            clearInterval(autoMethod);
        }).delegate('li', 'mouseleave', function() {
            pause = false;
            autoMethod = setInterval(function() {
                _auto($slides, $pages, opts);
            }, opts.speed);
        });
        //console.log(autoMethod)
        var $pages = _pagination($node, opts, numpic);
        if(opts.auto) {
            autoMethod = setInterval(function() {
                _auto($slides, $pages, opts);
            }, opts.speed);
        }
    }

1、_getSlides用于获取ul这个对象的li子标签，ul也就是这个焦点图插件

2、将除了第一个li标签，其他标签设置为隐藏

3、获取切换图片的数量，由于后面做循环是从下标0开始，做<=操作，所以减去一个1，其实这里不减也是可以的，看个人喜好

4、给li标签设置mouseenter与mouseleave的事件，分别是取消循环与继续循环

5、初始化选择按钮

6、参数auto如果为true，就激活自动切换

2014-09-22修正：

1、在firefox中切换标签或最小化以后，再打开这个页面，自动切换的间隔会出现混乱。

将插件中的所有setInterval修改成setTimeout，它们两个内部的执行有所不同。下面的clearInterval改成clearTimeout函数。我写了篇文章论述了两者之间的一点区别，

Javascript定时器(二)——setTimeout与setInterval。

autoMethod = setTimeout(function() {
       _auto($slides, $pages, opts);
}, opts.speed);

2、在进入页面的时候鼠标指在页面中，再从图片中移开，这个时候图片切换也会出现混乱。

由于在_build函数中的$node的mouseleave事件中，没有做清理循环的操作导致的问题。下面的代码中已改成setTimeout。

$node.delegate('li', 'mouseleave', function() {
            pause = false;
            clearTimeout(autoMethod);
            autoMethod = setTimeout(function() {
                _auto($slides, $pages, opts);
            }, opts.speed);
});

六、初始化选择按钮

/**
     * @method private
     * @name _pagination
     * @description 初始化选择按钮
     * @param $node [jQuery object] "目标对象"
     * @param opts [Object] "参数"
     * @param size [int] "图片数量"
     */
     function _pagination($node, opts, size) {
        var $ul = $('<ul>', {'class': opts.pageCss});
        for(var i = 0; i <= size; i++){
            $ul.append('<li>' + '<a href="javascript:void(0)">' + (i+1) + '</a>' + '</li>');
        }
        $ul.children(':first').addClass('current');//给第一个按钮选中样式
        var $pages = $ul.children('li');
        $ul.delegate('li', 'click', function() {//绑定click事件
            var changenow = $(this).index();
            _changePage($pages, $node, changenow);
        }).delegate('li', 'mouseenter', function() {
            pause = true;//暂停轮播
        }).delegate('li', 'mouseleave', function() {
            pause = false;
        });
        $node.after($ul);
        return $pages;
     }

1、动态添加按钮ul标签，赋上一个自定义class，将子标签li加上

2、将第一个按钮加上选中样式

3、给li标签加上click、mouseenter与mouseleave的事件，click事件绑定切换操作

4、把分页按钮放到插件对象ul的后面

5、返回分页按钮中的li对象，后面有用的

七、切换图片

/**
     * @method private
     * @name _change
     * @description 幻灯片显示与影藏
     * @param $slides [jQuery object] "图片对象"
     * @param $pages [jQuery object] "按钮对象"
     * @param next [int] "要显示的下一个序号"
     */
     function _fadeinout($slides, $pages, next){
        $slides.eq(nowImage).css('z-index','2');
        $slides.eq(next).css({'z-index':'1'}).show();
        $pages.eq(next).addClass('current').siblings().removeClass('current');
        $slides.eq(nowImage).fadeOut(400, function(){
            $slides.eq(next).fadeIn(500);
        });
    }

1、将当前的图片z-index加大，下一张图片的z-index也加大，显示下一张图，这样能做出一种渐变的效果，不加的话就会是很生硬的切换

2、选择按钮的下一个增加选中样式

3、应用jQuery的fadeOut与fadeIn做隐藏与显示的渐变特效

八、自动循环

/**
     * @method private
     * @name _auto
     * @description 自动轮播
     * @param $slides [jQuery object] "图片对象"
     * @param $pages [jQuery object] "按钮对象"
     * @param opts [Object] "参数"
     */
     function _auto($slides, $pages, opts){
        var next = nowImage + 1;
        var size = $slides.size() - 1;
        if(!pause) {
            if(nowImage >= size){
                next = 0;
            }
            _fadeinout($slides, $pages, next);
            if(nowImage < size){
                nowImage += 1;
            }else {
                nowImage = 0;
            }
        }else {
            clearInterval(autoMethod);//暂停的时候就取消自动切换
        }
     }

1、判断是暂停还是继续轮播

2、如果不是暂停，就根据条件做当前页与下一个按钮的序号设置

2014-09-22修正：

将_auto函数中的clearInterval改成clearTimeout，并添加setTimeout自循环。其他地方都一样。

function _auto($slides, $pages, opts){
        var next = nowImage + 1;
        var size = $slides.size() - 1;
        if(!pause) {
            //...
            //自动切换
            autoMethod = setTimeout(function() {
                _auto($slides, $pages, opts);
            }, opts.speed);
        }else {
            clearTimeout(autoMethod);//暂停的时候就取消自动切换
        }
}

插件还有很多问题，比如不能在一个页面绑定两个不同的对象，还有巨大的修改空间。

通过这次的修改，自己有了一个可以控制的焦点图切换插件，虽然还有很多问题但可以一步一步解决。以后嵌入到自己的项目中，修改起来也方便很多。

自制jQuery焦点图切换简易插件

一、静态效果

二、调用方式

三、jQuery插件通用格式

四、插件初始化

五、创建插件各个操作

六、初始化选择按钮

七、切换图片

八、自动循环

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

自制jQuery焦点图切换简易插件

一、静态效果

二、调用方式

三、jQuery插件通用格式

四、插件初始化

五、创建插件各个操作

六、初始化选择按钮

七、切换图片

八、自动循环

热门文章

最新文章

相关课程

相关电子书

相关实验场景