一个简单的基于jquery的轮播图插件

插件有五个参数,前两个是轮播区域的宽和高,第三个定义鼠标里拷轮播区域之后是否自动轮播,第三个定义自动轮播的间隔,第四个表示是否无缝轮播,第五个表示的是轮播的时间间隔。

使用方法:

$(‘#container’).lunbo({
width : 600,
height:500,
focus : false,
focustime : 600,
auto:false,
autotime:1000,
});

啥都不说,直接贴代码:

$.fn.lunbo = function (options){

var defaultOption = {
width : 400,
height:300,
auto : false,
autotime : 500,
focus : true,
focustime : 500
}
var options = $.extend(defaultOption, options);
focustime = options.focustime;
autotime = options.autotime;
var container = $(this);
var needmove = container.children(‘ul’);
var child = needmove.children();
var length = child.length;
var first = child.first().clone();
var last = child.last().clone();
if(defaultOption.focus){
needmove.append(first);
needmove.prepend(last);
needmove.css({‘width’: options.width*(length+2)+’px’,’height’:’100%’,’left’:-options.width+’px’});
}else{
needmove.css({‘width’: options.width*length+’px’,’height’:’100%’,’left’ : 0});
}
var next = $(‘<div>下一页</div>’).attr(‘id’,’next’);
var prev = $(‘<div>上一页</div>’).attr(‘id’,’prev’);
container.append(next,prev);
needmove.children().css({‘width’:options.width+’px’});
container.css({‘width’:options.width+’px’,’height’:options.height+’px’});
next.click(function (){
var left = needmove.position().left;//获取当前文档的left值
if(needmove.is(‘:animated’)){
return;
}
if(!options.focus){
if(left<=-(length-1)*options.width){
return;
}
needmove.stop().animate({‘left’:left-options.width+’px’},focustime);
}else{
if(left<=-options.width*length){
needmove.stop().animate({‘left’:left-options.width+’px’},focustime,function (){
needmove.css({‘left’:-options.width+’px’});
});
}else{
needmove.stop().animate({‘left’:left-options.width+’px’},focustime);
}
}

});
prev.click(function (){
var left = needmove.position().left;
if(needmove.is(‘:animated’)){
return;
}
if(!options.focus){
if(left>=0){
return;
}
needmove.stop().animate({‘left’:left+options.width+’px’},focustime);
}else{
if(left>=-options.width){
needmove.stop().animate({‘left’:left+options.width+’px’},focustime,function (){
needmove.css({‘left’:-options.width*length+’px’});
});
}else{
needmove.stop().animate({‘left’:left+options.width+’px’},focustime);
}
}
});
if(options.auto){
var timer;
function autoplay(){
var left = needmove.position().left;//获取当前文档的left值
if(needmove.is(‘:animated’)){
return;
}
if(!options.focus){
if(left<=-(length-1)*options.width){
return;
}
needmove.stop().animate({‘left’:left-options.width+’px’},focustime);
}else{
if(left<=-options.width*length){
needmove.stop().animate({‘left’:left-options.width+’px’},focustime,function (){
needmove.css({‘left’:-options.width+’px’});
});
}else{
needmove.stop().animate({‘left’:left-options.width+’px’},focustime);
}
}
}
container.mouseleave(function(){
timer = setInterval(autoplay,autotime);
});
container.mouseenter(function(){
clearInterval(timer);
});
}
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注