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

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

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

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


image.jpeg

 


一、静态效果


<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_wrapslide中的height属性可以根据实际情况修改

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

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的fadeOutfadeIn做隐藏与显示的渐变特效

 

八、自动循环


/**
     * @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);//暂停的时候就取消自动切换
        }
}

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

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

 


相关文章
|
5月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
54 1
jQuery+CSS3自动轮播焦点图特效源码
|
1天前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
9 4
jQuery Growl 插件(消息提醒)
|
3天前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
13 4
jQuery Cookie 插件
|
4月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
46 1
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】
|
4月前
|
JavaScript Perl PHP
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
26 0
|
5月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
48 0
|
移动开发 JavaScript HTML5
jQuery工具提示插件tooltip.js 使用教程
jQuery工具提示插件tooltip.js 使用教程
|
JavaScript 前端开发 UED
精心挑选的12款优秀 jQuery Ajax 分页插件和教程
  在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1174 0
|
Web App开发 JavaScript 前端开发
精心挑选的15款优秀 jQuery 文本特效插件和教程
  今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程。jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果。
1175 0