jq实现图片的轮播，以及图片的等比例缩放

这几天一直在弄一个项目的大屏幕的问题，老大的要求一开始是图片只需要实现轮播就 Ok了，但是随着项目的进行，需求也是在不断的改变，最终希望我可以在图片轮播的同时，在加上动画效果，使其可视化效果很好，废话就不说了，直接上代码吧。

1.实现图片的轮播

这样的方法有很多，但是用原生的js会出现当图片播放完毕，会突然回到第一张，用户体验不是很好，所以我选择了用jQuery来写图片的轮播。

2.对后台图片的处理

从后台取出的图片，有长方形的，正方形的，对于不同形状的图片，我们需进行不同的处理，这样才能保证图片是等比例缩放的，第一次写的时候，我没有考虑到容器的大小，最终代码出现了bug,其实图片的等比例缩放类似于js的缩略图。

具体的实现步骤：

1》实现图片的一边的缩放，使其一边充满屏幕

2》第一次缩放后的图片居于容器的中间

3》第二次实现对图片的缩放，并加上动画

(function () {.fn.slide = function (options) { 
var defaults = { 
};

    var opts = $.extend({}, defaults, options);
    var delaystr = "all " + 1 + "s ease-in";
    var _this = $(this);
    var legth = _this.find("ul").find("li").length;
    var Height = _this.height();//容器的高度
    var Width = _this.width();//容器的宽度
    var Domescale = Width / Height;      
    var _firstLi = _this.find("ul").find("li").eq(0)
    var _firstImg = _firstLi.find("img");
    var imgwidth = _firstImg.width();//图片的宽度
    var imgheight = _firstImg.height();//图片的高度
        init(_firstImg); //第一张图片的初始化
        magnify(_firstImg);            
    var $dome = $(this).find("ul");
    var _left = $(this).width();


    if (legth > 1) {
        setInterval(function change() {
            var _this = $dome.find("li").eq(1).find("img");//第二张图片
            $dome.css("left", "-" + _left + "px");
            $dome.find("li").eq(0).appendTo($dome);
            init(_this);
            magnify(_this)
            $dome.css({ left: 0 });
        }, opts.speed*1000);

    }

    //初始化第一张图片
    function init(dom) {           
        var imgwidth = dom.width();//图片的宽度
        var imgheight = dom.height();//图片的高度
        var imgscale = imgwidth / imgheight;
            if (Domescale < imgscale) {
                var _left = 0;
                var _top = 0;
                imgwidth = Width;
                (imgheight < Height || imgwidth < Width) ? _top = (Height - imgheight) / 2 : _top = (imgheight - Height) / 2

            } else if (Domescale > imgscale) {
                var _top = 0;
                var _left = 0;
                imgheight = Height;
                imgwidth = imgheight * imgscale;
                (imgheight < Height || imgwidth < Width) ? _left = (Width - imgwidth) / 2 : _left = (imgwidth - Width) / 2
            } else if (Domescale == imgscale) {
                imgwidth = Width;
                imgheight = Height;
            };
            var newheight = parseInt(imgheight);
            var nwewidth = parseInt(imgwidth);

            dom.css({
                "height": newheight,
                "width": nwewidth,
                "margin-top": _top + "px",
                "margin-left": _left + "px",
            })
        }

    //放大倍数
    function magnify(dom) {
        var imgwidth = dom.width();//图片的宽度
        var imgheight = dom.height();//图片的高度
        var imgscale = imgwidth / imgheight;
        var scale;
        if (imgwidth == Width) {
            scale = Height / imgheight
        } else {
            scale = Width / imgwidth;
        };
        var s = "scale(" + scale + "," + scale + ")";
        dom.css({
            "transition": delaystr,
            "transform": s,
        })
        dom.parent("li").siblings("li").find("img").css({
            "transition": "",
            "transform": "",
        })
    }

}