/** * @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、如果不是暂停，就根据条件做当前页与下一个按钮的序号设置
插件还有很多问题，比如不能在一个页面绑定两个不同的对象，还有巨大的修改空间。
通过这次的修改，自己有了一个可以控制的焦点图切换插件，虽然还有很多问题但可以一步一步解决。以后嵌入到自己的项目中，修改起来也方便很多。
下载： https://www.jb51.net/jiaoben/210405.html
您可能感兴趣的文章: