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>