jquery插件圖片瀏覽
jquery多圖效果？jquery代碼部分
(function($){$.fn.mPicsList = function(options){var picsImgs = $(this).find("img"); //獲取圖片var picsImgsLen = picsImgs.length; //圖片總個數var index = 0; //當前圖片索引下標var ltBtn = $(".leftbtn"); //左按鈕var rtBtn = $(".rightbtn"); //右按鈕var pageNum = $(".allpics"); //圖片總個數的標簽var curPage = $(".curpic"); //當前圖片位置的標簽var isAdd = true; //判斷是加還是減（向右加，向左減）var stop = ""; //是否運動還是停止var defaults = { isAuto: 1, //設置是否自動播放runTime: 5000, //設置每張圖片停留的時間fadeInTime: 800 //設置淡入的過度時間 };var opts = $.extend(defaults, options, {});this.each(function(){ //初始化pageNum.html(picsImgsLen); //將標簽中顯示圖片總個數if(!!defaults.isAuto){ //設置是否自動播放 autoPlay();$(this).hover(function(){clearInterval(stop);},function(){autoPlay();});}/** autoPlay函，自動播放*/
//有點小問題：當圖片第一次加載沒完成的時候，這時圖片沒有顯示，會自動執行到下一張圖片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;index=addNum(isAdd,index);running(index);loadImage(picsImgs.eq(index).attr("msrc"),index);});});/** addNum函數，計算索引位置* isAdd布爾類型，判斷加還是減* num整形* 返回整形，即當前索引位置*/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方法，執行動作* num指當前索引位置*/function running(num){curPage.html(parseInt(num+1));picsImgs.hide().removeClass("on").eq(num).addClass("on").fadeIn(defaults.fadeInTime);}/** loadRun方法，第一次圖片加載時候執行* num指當前索引位置*/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方法判斷圖片是否加載完成* url圖片的地址* num指當前索引位置*/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結構部分
<div id="page"><div id="mpics"><img class="on" alt="" src="./images/120923/mi001.jpg" /> <img alt="" src="./images/transparent.png" msrc="./images/120923/mi002.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi003.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi004.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi005.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi006.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi007.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi008.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi009.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi010.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi011.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi012.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi013.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi014.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi015.jpg" /><img alt="" src="./images/transparent.png" msrc="./images/120923/mi016.jpg" /><a class="leftbtn"></a><a class="rightbtn"></a></div><div class="downpics"><span class="curpic">1</span>/<span class="allpics">16</span></div></div>
