JQuery插件開發初探——圖片輪播

在熟悉了插件開發的結構之後，本身嘗試着作了一個稍微複雜一點的小功能：圖片輪播插件。

因爲以前使用的一款圖片輪播插件，性能不高，頁面加載的時候須要載入所有的圖片，所以速度很慢。

經過本身作這個小插件，能控制一下圖片的加載，每次只加載一張圖片。固然翻轉的特效確定沒有人家的絢麗。

 

以前嘗試了在div中內嵌img標籤的方式，可是左右兩側的翻頁按鈕不容易擺放，因而採用了3個div的方式，最外面一個大的div，背景圖片爲照片圖片，其中左右各兩個小div，放翻頁按鈕。

因爲開始的時候須要頻繁調樣式，所以大div中的代碼都是寫死的，等到調試成功後，再放到js裏去append。

 

參數中定義了須要展現的照片列表和div的寬高：

var defaults = {
            height: '300px',
            width: '1000px',
            imgs: ['images/photo/1.JPG', 'images/photo/2.JPG', 'images/photo/3.JPG', 'images/photo/4.JPG', 'images/photo/5.JPG']
        };

圖片拉伸用了比較新的CSS屬性："background-size", '100% 100%'

核心思想就是每次隨機一直圖片做爲背景，隨機的原則是不和上一張重複。

 

如下是完整的js代碼：

/***************************************************
* DannyImagesShow
* 圖片輪播
* Ver:1.0
* Author:DannyWang
* Date:2013-10-15
* 圖片輪播
  Example: 
  var opt = {
            height: '500px',
            width: '100%',
            imgs: ['images/photo/6.JPG', 'images/photo/7.JPG', 'images/photo/8.JPG', 'images/photo/9.JPG']
        };
  $("#imgDiv").dannyImagesShow(opt);
****************************************************/
(function ($) {
    $.fn.dannyImagesShow = function (options) {
        //定義默認值
        var defaults = {
            height: '300px',
            width: '1000px',
            imgs: ['images/photo/1.JPG', 'images/photo/2.JPG', 'images/photo/3.JPG', 'images/photo/4.JPG', 'images/photo/5.JPG']
        };
        //合併用戶自定義屬性，默認屬性
        var options = $.extend(defaults, options);
        var gNumber=0;
        this.each(function () {
            var imgDiv = $(this);
            imgDiv.css("height", options.height);
            imgDiv.css("width", options.width);
            imgDiv.css("background-image", 'url("' + options.imgs[1] + '")');
            imgDiv.css("background-position", 'center');
            imgDiv.css("background-size", '100% 100%');

            var pagerHTML = '';
            pagerHTML += '<div id="leftbar" style="float: left; height: ' + (options.height.replace('px', '') - (options.height.replace('px', '') / 2 - 15)) + 'px' + '; width: 30px; padding-left:10px; padding-top: ' + (options.height.replace('px', '') / 2 - 15) + 'px' + ';">';
            pagerHTML += '<a id="leftbarButton" class="left">prev</a>';
            pagerHTML += '</div>';
            pagerHTML += '<div id="rightbar" style="float: right; height: ' + (options.height.replace('px', '') - (options.height.replace('px', '') / 2 - 15)) + 'px' + '; width: 30px;padding-right:10px; padding-top: ' + (options.height.replace('px', '') / 2 - 15) + 'px' + ';">';
            pagerHTML += '<a id="rightbarButton" class="right">next</a>';
            pagerHTML += '</div>';

            imgDiv.append(pagerHTML);

            var btnPrev = $(".left");
            var btnNext = $(".right");

            btnPrev.click(function () {
                var n = getImagesNum(1, options.imgs.length);
                while (n === gNumber) {
                    n = getImagesNum(1, options.imgs.length);
                }
                gNumber = n;
                $("#imgDiv").hide();
                imgDiv.css("background-image", 'url("' + options.imgs[n - 1] + '")');
                $("#imgDiv").slideDown();
            });

            btnNext.click(function () {
                var n = getImagesNum(1, options.imgs.length);
                while (n === gNumber) {
                    n = getImagesNum(1, options.imgs.length);
                }
                gNumber = n;
                $("#imgDiv").hide();
                imgDiv.css("background-image", 'url("' + options.imgs[n - 1] + '")');
                $("#imgDiv").slideDown();
            });

            $("#leftbar").bind("mouseover", function () {
                $("#leftbarButton").show();
            });
            $("#leftbar").bind("mouseout", function () {
                $("#leftbarButton").hide();
            });

            $("#rightbar").bind("mouseover", function () {
                $("#rightbarButton").show();
            });
            $("#rightbar").bind("mouseout", function () {
                $("#rightbarButton").hide();
            });

            $(".left").hide();
            $(".right").hide();
        });

        //獲取隨機數
        var getImagesNum = function (under, over) {
            switch (arguments.length) {
                case 1: return parseInt(Math.random() * under + 1);
                case 2: return parseInt(Math.random() * (over - under + 1) + under);
                default: return 0;
            }
        }
    }
})(jQuery);