Document Description Address: http://www.jq22.com/jquery-info385
The original plug-in when there is only one picture when there is a bug, modified, the following is the source
(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 (in). 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 *, 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);
Photo Carousel Plugin Slidebox.js