图片轮播插件slideBox.js

标签：item   duration   over   pac   src   mouse   jquery   div   opacity   

文档说明地址：http://www.jq22.com/jquery-info385

原来的插件当只有一个图片的时候有BUG，修改好了，以下为源码

(function($) {
$.fn.slideBox = function(options) {
var defaults = {
direction: ‘left‘,
duration: 0.6,
easing: ‘swing‘,
delay: 3,
startIndex: 0,
hideClickBar: true,
clickBarRadius: 5,
hideBottomBar: false,
width: null,
height: null
};
var settings = $.extend(defaults, options || {});
var wrapper = $(this),
ul = wrapper.children(‘ul.items‘),
lis = ul.find(‘li‘),
firstPic = lis.first().find(‘img‘);
var li_num = lis.size(),
li_height = 0,
li_width = 0;
var order_by = ‘ASC‘;
var init = function() {
if (!wrapper.size()) return false;
li_height = settings.height ? settings.height : lis.first().height();
li_width = settings.width ? settings.width : lis.first().width();
wrapper.css({
width: li_width + ‘px‘,
height: li_height + ‘px‘
});
lis.css({
width: li_width + ‘px‘,
height: li_height + ‘px‘
});
if (settings.direction == ‘left‘) {
ul.css(‘width‘, li_num * li_width + ‘px‘)
} else {
ul.css(‘height‘, li_num * li_height + ‘px‘)
};
ul.find(‘li:eq(‘ + settings.startIndex + ‘)‘).addClass(‘active‘);
if (!settings.hideBottomBar) {
var tips = $(‘<div class="tips"></div>‘).css(‘opacity‘, 0.6).appendTo(wrapper);
var title = $(‘<div class="title"></div>‘).html(function() {
var active = ul.find(‘li.active‘).find(‘a‘),
text = active.attr(‘title‘),
href = active.attr(‘href‘);
return $(‘<a>‘).attr(‘href‘, href).text(text)
}).appendTo(tips);
var nums = $(‘<div class="nums"></div>‘).hide().appendTo(tips);
lis.each(function(i, n) {
var a = $(n).find(‘a‘),
text = a.attr(‘title‘),
href = a.attr(‘href‘),
css = ‘‘;
i == settings.startIndex && (css = ‘active‘);
$(‘<a>‘).attr(‘href‘, href).text(text).addClass(css).css(‘borderRadius‘, settings.clickBarRadius + ‘px‘).mouseover(function() {
$(this).addClass(‘active‘).siblings().removeClass(‘active‘);
ul.find(‘li:eq(‘ + $(this).index() + ‘)‘).addClass(‘active‘).siblings().removeClass(‘active‘);
start();
stop()
}).appendTo(nums)
});
if (settings.hideClickBar) {
tips.hover(function() {
nums.animate({
top: ‘0px‘
}, ‘fast‘)
}, function() {
nums.animate({
top: tips.height() + ‘px‘
}, ‘fast‘)
});
nums.show().delay(2000).animate({
top: tips.height() + ‘px‘
}, ‘fast‘)
} else {
nums.show()
}
};
lis.size() > 1 && start()
};
var start = function () {
if (li_num <= 1) {

} else {
var active = ul.find(‘li.active‘),
active_a = active.find(‘a‘);
var index = active.index();
if (settings.direction == ‘left‘) {
offset = index * li_width * -1;
param = {
‘left‘: offset + ‘px‘
}
} else {
offset = index * li_height * -1;
param = {
‘top‘: offset + ‘px‘
}
};
wrapper.find(‘.nums‘).find(‘a:eq(‘ + index + ‘)‘).addClass(‘active‘).siblings().removeClass(‘active‘);
wrapper.find(‘.title‘).find(‘a‘).attr(‘href‘, active_a.attr(‘href‘)).text(active_a.attr(‘title‘));
ul.stop().animate(param, settings.duration * 1000, settings.easing, function () {
active.removeClass(‘active‘);
if (order_by == ‘ASC‘) {
if (active.next().size()) {
active.next().addClass(‘active‘)
} else {
order_by = ‘DESC‘;
active.prev().addClass(‘active‘)
}
} else if (order_by == ‘DESC‘) {
if (active.prev().size()) {
active.prev().addClass(‘active‘)
} else {
order_by = ‘ASC‘;
active.next().addClass(‘active‘)
}
}
});
wrapper.data(‘timeid‘, window.setTimeout(start, settings.delay * 1000))
}

};
var stop = function() {
window.clearTimeout(wrapper.data(‘timeid‘))
};
wrapper.hover(function() {
stop()
}, function() {
window.setTimeout(start, settings.delay * 1000);
});
var imgLoader = new Image();
imgLoader.onload = function() {
imgLoader.onload = null;
init()
};
imgLoader.src = firstPic.attr(‘src‘)
}
})(jQuery);

图片轮播插件slideBox.js

标签：item   duration   over   pac   src   mouse   jquery   div   opacity   

原文地址：http://www.cnblogs.com/kaien/p/6895169.html