代码界的小白,工作中需要多次调用左右转换的轮播图,我就给封装了。但是总感觉自己写的代码比较繁琐。方法比较笨
,求大神给简洁化一下,顺便进行学习。 另外如果默认值是top的话。动画效果会没有。
$.fn.zuoyouzhuan = function(options) {
this.each(function(i, ele) {
slide(ele, options)
})
return this
}
var slide = function(ele, options) {
var des = $.extend({
fangxiang: 'left',
duoshaotu: '4',
sudu: '3000'
}, options)
var $ele = $(ele)
var $ul = $ele.find('ul')
var $li = $ele.find('li')
var x_width = $ele.find('li').width()
var y_height = $ele.find('li').height()
var num = $ele.find('li').length;
if(des.fangxiang == "top") {
var topmar = parseInt($li.css('margin-bottom'))
var boderw= parseInt($('li').css('border-width'))
$ul.css({ 'heigth': (num * (y_height + topmar + boderw*2)) + 'px' });
}
if(des.fangxiang == "left") {
var boderw= parseInt($('li').css('border-width'))
var rightmar = parseInt($li.css('margin-right'))
$ul.css({ 'width': (num * (x_width + rightmar+boderw*2)) + 'px' });
}
var t;
if(num > des.duoshaotu) {
var t = setInterval(sidebarFlipAuto, des.sudu);
function sidebarFlipAuto() {
if(des.fangxiang == "left") {
$ul.stop(true, true).animate({ "left": (x_width + rightmar) + 'px' }, 300, function() {
$ul.find('li:first').appendTo($ul);
$ul.css("left", '0');
});
}
if(des.fangxiang == "top") {
$ul.stop(true, true).animate({ "top": (y_height + topmar) + 'px' }, 300, function() {
$ul.find('li:first').appendTo($ul);
$ul.css("top", '0');
});
}
}
$ul.hover(function() {
clearInterval(t);
}, function() {
t = setInterval(sidebarFlipAuto, 4000);
})
$ele.find('span').eq(0).unbind('click').click(function() {
$ul.find('li:last').prependTo($ul);
if(des.fangxiang == "left") {
$ul.css({ "left": (x_width + rightmar) + 'px' });
$ul.stop(true, true).animate({ "left": '0' }, 300);
}
if(des.fangxiang == "top") {
$ul.css({ "top": (y_height + rightmar) + 'px' });
$ul.stop(true, true).animate({ "top": '0' }, 300);
}
})
$ele.find('span').eq(1).unbind('click').click(function() {
sidebarFlipAuto();
})
}
}
那个.unbind('click').click不写这个有时会执行两次,所以百度了一下这个方法。
求简洁化。