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>