Question

jquery如何将一个点击左右按钮切换图片的效果封装成可用于在同一个模板中其他块使用

var pic_course_list = document.getElementById("pic_course_list");
var pic_course_list_inner = document.getElementById("pic_course_list_inner");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var imgLen = pic_course_list.getElementsByTagName("li").length;
pic_course_list_inner.style.width = pic_course_list.offsetWidth*imgLen+"px";
function runRight(prev,curBtn,wrap){
prev.style.cursor="pointer";
if((imgLen-(wrap.scrollLeft/442))>2){
wrap.scrollLeft+=442;
}
else{
wrap.scrollLeft+=442*(imgLen-(wrap.scrollLeft/442));
curBtn.style.cursor="default";
}
}
function runLeft(next,curBtn,wrap){
next.style.cursor="pointer";
if((wrap.scrollLeft/442)>1){
wrap.scrollLeft-=442;
}
else{
wrap.scrollLeft-=442*(wrap.scrollLeft/442);
curBtn.style.cursor="default";
}
}
prev.onclick = function(){
runLeft(next,this,pic_course_list);
}
next.onclick = function(){
runRight(prev,this,pic_course_list);
}

像这种的效果如何使用在同一模板中的其他模块，且不彼此影响

Answer 1

(function (A){
var defaults={
picCourseListId:"pic_course_list",
picCourseListInnerId:"pic_course_list_inner",
prevId:"prev",
nextId:"next",
itemTag:"li"
};
A.a=function tpqh(options){
var option=defaults;
if(typeof(option)=="Object"){
for(var k in options){
option[k]=options[k];
}
}
var pic_course_list = document.getElementById(option.picCourseListId);
var pic_course_list_inner = document.getElementById(option.picCourseListInnerId);
var prev = document.getElementById(option.prevId);
var next = document.getElementById(option.nextId);
var imgLen = pic_course_list.getElementsByTagName(option.itemTag).length;
pic_course_list_inner.style.width = pic_course_list.offsetWidth * imgLen + "px";
function runRight(prev, curBtn, wrap) {
prev.style.cursor = "pointer";
if((imgLen - (wrap.scrollLeft / 442)) > 2) {
wrap.scrollLeft += 442;
} else {
wrap.scrollLeft += 442 * (imgLen - (wrap.scrollLeft / 442));
curBtn.style.cursor = "default";
}
}
function runLeft(next, curBtn, wrap) {
next.style.cursor = "pointer";
if((wrap.scrollLeft / 442) > 1) {
wrap.scrollLeft -= 442;
} else {
wrap.scrollLeft -= 442 * (wrap.scrollLeft / 442);
curBtn.style.cursor = "default";
}
}
prev.onclick = function() {
runLeft(next, this, pic_course_list);
}
next.onclick = function() {
runRight(prev, this, pic_course_list);
}
}
})(window)
封装成这样就可以在其它地方调用了：a({});

Answer 2

修改ID,CLASS,修改一些可能产品冲突的函数名

追问

除了修改id和一些函数名之外，怎么封装让他们综合一下，使用在每个模块当中呢

追答

就是会重复使用的函数,封装起来,重复调用就可以了,封装的时候里面的变量之类的参数,值都由外部传入