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