Jquery simple image navigation plug-in jquery. imgNav. js

It takes about five to ten minutes to get familiar with jquery. LEVIN successfully wrote a jquery plug-in because this pilot effect is quite common ~

If your website needs a similar effect, you can use it directly or expand it :)

If you want to encapsulate some reusable functions into jquery plug-ins, do not forget to take a look at the general jquery plug-in development process, and even have a jquery plug-in template.

Copy codeThe Code is as follows:
; (Function ($ ){
// Private functions.
Var p = {};
P. showC = function (opts ){
/// <Summary> show content of a specified navigation </summary>
P. _ clist. hide (). filter (opts. filter). show ();
}; // ShowNav
P. onNav = function (evt ){
P. _ I = $ (this );
P. _ alist. removeClass (p. _ opts. on );
P. _ I. addClass (p. _ opts. on );
P. showC ({filter: p. _ I. attr ("href ")});
Return false;
}; // OnClick
// Main plugin body
$. Fn. imgNav = function (options ){
// Set the options.
Options = $. extend ({}, $. fn. imgNav. defaults, options );
P. _ opts = options;
// Go through the matched elements and return the jQuery object.
Return this. each (function (){
P. _ alist = $ ("a", this );
P. _ clist = $ (p. _ opts. navc );
P. _ alist. click (p. onNav );
});
};
// Public defaults.
$. Fn. imgNav. defaults = {
On: 'on ',
Off: 'off ',
Navc: '. navc' // nav content selector
};
}) (JQuery );