(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);

<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>