Jquery image switching plug-in and jquery switching plug-in

Jquery image switching plug-in and jquery switching plug-in

Copy codeThe Code is as follows:
/**
* Image switching plug-in
* Dependence jquery-1.7.2.min.js
**/
(Function ($ ){
// Call method $ ('# silder '). imgSilder ({s_width: 564, s_height: 293, is_showTit: true, s_times: 3000, css_link: 'css/style.css '}); the container must be added to the id silder_list or class silder_list.
/* Reference structure
<Div class = "silder" id = "silder">
<Ul class = "silder_list" id = "silder_list">
<Li>

</Li>
<Li>

</Li>
<Li>

</Li>
<Li>

</Li>
</Ul>
</Div>
*/
$. Fn. silderDefaults = {// default parameter
S_width: 500, // container width
S_height: 500, // container height
Is_showTit: true, // whether to display the image title; false: not displayed; true: Displayed
S_times: 3000, // set the scroll time
Css_link: 'css/style.css'
};
$. ExtendSilder = function (obj, opt) {// obj Element Object, opt parameter object
Var g = {// public method, externally callable
// Initialization
Init: function (){
Var wh = {width: opt. s_width, height: opt. s_height };
Var pagesize = 0; // page number
Var silderList = $ ('# silder_list', g. obj );
Var silderList_li = $ ('# silder_list li', g. obj );
G.LoadCSS(opt.css _ link); // imports a style file.
G.obj.css (wh); silderList.css (wh); silderList_li.find('img').css (wh); // you can specify the width and height attribute.
Var currHtml = ""; // Add the playback page number and text description.
If (opt. is_showTit) {// determines whether the title is displayed.
CurrHtml + = "<div class = 'silder _ desc' id = 'silder _ desc'> </div> ";
}
Img_size = silderList_li.size (); // number of images
CurrHtml + = "<ul class = 'silder _ page' id = 'silder _ page'>"; // code injection by page number
For (var I = 0; I CurrHtml + = "<li>" + parseInt (1 + I), 10) + "</li> ";
}
CurrHtml + = "</ul> ";
SilderList_li.eq (0). show (). siblings (). hide (); // initialize to hide other images
G. obj. append (currHtml); // inject the page number
Var silderPage = $ ('# silder_page', g. obj );
Var silderPage_li = $ ('# silder_page li', g. obj );
SilderPage_li.eq (0). addClass ('current ');
If (opt. is_showTit) {// initialize the image description
$ ('# Silder_desc'). text (silderList_li.eq (0). find ('img '). attr ('alt '));
}
SilderPage_li.on ('click', function (){
Pagesize = $ (this). index ();
SilderList_li.eq (pagesize). fadeIn (1000). siblings (). fadeOut (100 );
$ (This). addClass ('stream'). siblings (). removeClass ('stream ');
If (opt. is_showTit ){
$ ('# Silder_desc'). text (silderList_li.eq (pagesize). find ('img '). attr ('alt '));
}
});
Var t;
SilderList. hover (function () {window. clearInterval (t); return ;}, function () {t = window. setInterval (function (){
If (pagesize = 0)
{
SilderList_li.eq (pagesize). fadeIn (1000). siblings (). fadeOut (100 );
SilderPage_li.eq (pagesize). addClass ('stream'). siblings (). removeClass ('stream ');
If (opt. is_showTit ){
$ ('# Silder_desc'). text (silderList_li.eq (pagesize). find ('img '). attr ('alt '));
}
Pagesize ++;
If (pagesize> = img_size ){
Pagesize = 0;
}
}
}, Opt. s_times) ;}). trigger ("mouseout"); // stop automatic animation during suspension. trigger triggers the trigger by default.
},
LoadCSS: function (url) {// create a css
Var s = document. createElement ("LINK ");
S. rel = "stylesheet ";
S. type = "text/css ";
S. href = url;
Document. getElementsByTagName ("HEAD") [0]. appendChild (s );
}
};
G. obj = $ (obj );
G. init ();
Return g;
}
$. Fn. imgSilder = function (options ){
If (this. length = 0) return; // determines whether the object exists.
This. each (function (){
If (this. usedSilder) return;
Var opt = $. extend ({}, $. fn. silderDefaults, options); // merge the assigned parameters.
This. usedSilder = $. extendSilder (this, opt );
});
}
}) (JQuery );

The above is all the content of the Code shared in this article. I hope you will like it.