下面是自己写的jQuery无缝连接图的源代码,想将它封装成插件,看了一些文章还不是很清楚,希望大神讲解修改的原理、核心和思想。
$(function () {
var stage=$('.pic-stage');
var pic=$('.pic-box');
//克隆元素并插入到图片容器的末尾
pic.append($('.pic-box li').first().clone());
var picLi=$('.pic-box li');
var btn=$('.btn');
//获取单张图片的大小
var picWidth=parseInt(picLi.eq(0).css('width'));
//获取图片的个数
var size=picLi.size();
//根据图片个数添加导航菜单的li
var panel=$('.panel');
for (var i=0;i<size-1;i++){
panel.append('<li></li>');
}
var panelLi=$('.panel li');
//设置当前图片索引
var iNow=0;
pic.css('width',picWidth*size);
panelLi.first().addClass('active');
//导航条事件
panelLi.hover(function() {
iNow=$(this).index();
$(this).addClass('active').siblings().removeClass('active');
pic.stop().animate({left:(-iNow*picWidth)+'px'});
});
//向左的按钮
btn.eq(0).click(function() {
iNow--;
if (iNow===-1) {
pic.css('left',-(size-1)*picWidth);
iNow=size-2;
}
pic.stop().animate({left:(-iNow*picWidth)+'px'});
if (iNow===-1) {
panelLi.eq(size-1).addClass('active').siblings().removeClass('active');
} else {
panelLi.eq(iNow).addClass('active').siblings().removeClass('active');
}
});
//向右的按钮
btn.eq(1).click(function() {
iNow++;
if (iNow===size) {
pic.css('left','0px');
iNow=1;
}
pic.stop().animate({left:(-iNow*picWidth)+'px'});
if (iNow===size-1) {
panelLi.eq(0).addClass('active').siblings().removeClass('active');
}else(
panelLi.eq(iNow).addClass('active').siblings().removeClass('active')
);
});
//自动播放函数,与向右按钮事件函数一致,用trigger触发
function autoPlay(){
btn.eq(1).trigger('click');
}
var timer=setInterval(autoPlay,2000);
//鼠标悬浮停止定时器
stage.hover(function() {
clearInterval(timer);
}, function() {
//这里注意要timer指向定时器,否则后面的定时器无法清除
timer=setInterval(autoPlay,2000);
});
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
首先你得把参数抽象出来,代码里引用了这么多直接的类名是不是可以抽象成参数?还有其它一些可配置的数据是否可以抽象成参数?
然后就是考虑执行的主体,是 $ 还是 $.fn,扩展 $ 是表态方法,扩展 $.fn 是实例方法。