Jquery plugin Image Browsing

Jquery plugin Image Browsing

Jquery code

(Function ($) {$. FN. mpicslist = function (options) {var picsimgs = $ (this ). find ("IMG"); // obtain the image var picsimgslen = picsimgs. length; // The total number of images var Index = 0; // The current image index subscript var ltbtn = $ (". leftbtn "); // left button var rtbtn = $ (". rightbtn "); // right button var pagenum = $ (". allpics "); // The label var curpage for the total number of images =$ (". curpic "); // The label var isadd = true for the current image position; // you can determine whether to add or subtract (add to the right and subtract from the left) var stop = ""; // whether to exercise or stop var defaults = {isauto: 1 ,/ /Set whether to automatically play the runtime: 5000, // set the residence time of each image. fadeintime: 800 // set the over time of the Fade in.}; var opts = $. extend (defaults, options, {}); this. each (function () {// initialize pagenum.html (picsimgslen); // display the total number of images in the tag if (!! Defaults. isauto) {// set whether to automatically play autoplay (); $ (this ). hover (function () {clearinterval (STOP) ;}, function () {autoplay () ;}) ;}/ ** autoplay letter, automatic playback */
// A small problem: when the first image loading is incomplete, the image is not displayed and will be automatically executed to the next image function autoplay () {isadd = true; stop = setinterval (function () {Index = addnum (isadd, index); running (INDEX); LoadImage (picsimgs. eq (index ). ATTR ("msrc"), index) ;}, defaults. runtime);} ltbtn. click (function () {isadd = false; Index = addnum (isadd, index); running (INDEX); LoadImage (picsimgs. eq (index ). ATTR ("msrc"), index) ;}); rtbtn. click (function () {isadd = true; I Ndex = addnum (isadd, index); running (INDEX); LoadImage (picsimgs. eq (index ). ATTR ("msrc"), index) ;});/** addnum function, calculate the index location * isadd boolean type, determines whether to add or subtract * num integer * and returns the integer, that is, the current index location */function addnum (isadd, num) {If (isadd) {num ++; if (Num> parseint (picsImgsLen-1) {num = 0 ;}} else {num --; If (Num <0) {num = picsImgsLen-1 ;}} return num ;} /** running method. The execution action * num indicates the current index position */function running (Num) {curpage.html (parsein T (Num + 1); picsimgs. hide (). removeclass ("On "). eq (Num ). addclass ("On "). fadein (defaults. fadeintime);}/** loadrun method. When the first image is loaded, * num indicates the current index position */function loadrun (Num) {If (typeof (picsimgs. eq (Num ). ATTR ("msrc "))! = "Undefined") {var TMP = picsimgs. eq (Num ). ATTR ("msrc"); picsimgs. eq (Num ). addclass ("On "). ATTR ("src", TMP ). removeattr ("msrc");}/** LoadImage method to determine whether the image is loaded successfully * URL image address * num indicates the current index location */function LoadImage (URL, num) {var o = new image (); O. src = URL; If (O. complete) {loadrun (Num);} else {o. onload = function () {loadrun (Num) ;}; O. onerror = function () {}}}}) (jquery );

 

HTML Structure

<div id="page">            <div id="mpics">                                                                                                                                                                                                                                                                                 <a class="leftbtn"></a>                <a class="rightbtn"></a>            </div>            <div class="downpics">                <span class="curpic">1</span>/<span class="allpics">16</span>            </div>        </div>