/**
* Picture Switch Plugin
* Dependence Jquery-1.7.2.min.js
**/
(function ($) {
Call Mode $ (' #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 picture title false: Do not display, true: Display
s_times:3000,//Set scrolling time
Css_link: ' Css/style.css '
};
$.extendsilder = function (obj,opt) {//obj element object, opt parameter object
var g = {//public method, external callable
Class
Init:function () {
var wh ={width:opt.s_width,height:opt.s_height};
var pagesize=0; Page
var silderlist = $ (' #silder_list ', g.obj);
var Silderlist_li = $ (' #silder_list Li ', g.obj);
G.loadcss (Opt.css_link); Style file Import
G.OBJ.CSS (WH); SILDERLIST.CSS (WH); Silderlist_li.find (' img '). CSS (WH); Set width High Properties
var currhtml = ""; Add Play page number and text description
if (opt.is_showtit) {//To determine whether the caption is displayed
currhtml + = "<div class= ' silder_desc ' id= ' Silder_desc ' ></div>";
}
Img_size = Silderlist_li.size ()//number of pictures
currhtml + = "<ul class= ' silder_page ' id= ' silder_page ' >";//page numbering code injection
for (Var i=0 i < img_size; i++) {
currhtml + + "<li>" + parseint ((1 + i), ten) + "</li>";
}
currhtml = "</ul>";
Silderlist_li.eq (0). Show (). siblings (). Hide (); Initialize hidden other pictures
G.obj.append (currhtml)//injection pagination
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 picture 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 ("current"). Siblings (). Removeclass (' current ');
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 < img_size && pagesize >= 0)
{
Silderlist_li.eq (pagesize). FadeIn (1000). Siblings (). fadeout (100);
Silderpage_li.eq (pagesize). addclass (' current '). Siblings (). Removeclass (' current ');
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 when suspending, trigger the default triggering effect
},
Loadcss:function (URL) {//new 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; Determine if an object exists
This.each (function () {
if (This.usedsilder) return;
var opt = $.extend ({}, $.fn.silderdefaults, options); Merging assigned parameters
This.usedsilder = $.extendsilder (this, opt);
});
}
}) (JQuery);
The above is the article to share the entire content of the code, I hope you can enjoy
