利用jquery封装一个简易的旋转木马特效插件

这只是一个简易的旋转木马插件，理解其中的原理比较重要

;(function ($) {
  $.fn.extend({
    transiton:function (json) {
      //设置初始配置单
      json = $.extend([
        {
          width: 400,
          top: 20,
          left: 50,
          opacity: 0.2,
          zIndex: 2
        },//第0个li的样式
        {
          width: 600,
          top: 70,
          left: 0,
          opacity: 0.8,
          zIndex: 3
        },//第1个li的样式
        {
          width: 800,
          top: 100,
          left: 200,
          opacity: 1,
          zIndex: 4
        },//第2个li的样式
        {
          width: 600,
          top: 70,
          left: 600,
          opactity: 0.8,
          zIndex: 3
        },//第3个li的样式
        {
          width: 400,
          top: 20,
          left: 750,
          opacity: 0.2,
          zIndex: 2
        } //第4个li的样式
      ],json);//初始配置单设置结尾

      //寻找对象
      var $lis = this.find('ul>li');

      $lis.each(function (i, e) {
        //$(e)指代当前事件对象
        //给每个li的样式初始化
        $(e).stop()
        .animate({
          'width': json[i].width,
          'top': json[i].top,
          'left': json[i].left,
          'opacity': json[i].opacity,
          'zIndex': json[i].zIndex
        }, 1000);
      });

      //给wrap注册鼠标悬停事件
      this.on('mouseenter', function () {
        this.children().children('div.arrow').stop().animate({opacity:1},500);
      });
      //给wrap注册鼠标离开事件
      this.on('mouseleave', function () {
        this.children().children('div.arrow').stop().animate({opacity:0},500);
      });

      //给左右箭头注册点击事件
      //给左箭头注册点击事件
      this.find('div>a.prev').on('click', function () {
        //让配置单的第一项跑到数组的最后一项
        json.push(json.shift());
        //给每个li重新配置样式，并利用animate方法使其呈现动画效果
        $lis.each(function (i, e) {
          $(e).stop()
          .animate({
            'width': json[i].width,
            'top': json[i].top,
            'left': json[i].left,
            'opacity': json[i].opacity,
            'zIndex': json[i].zIndex
          }, 500);
        });
      });

      //给右箭头注册点击事件
      this.find('div>a.next').on('click', function () {
        //让配置单的第一项跑到数组的最后一项
        json.unshift(json.pop());
        //给每个li重新配置样式，并利用animate方法使其呈现动画效果
        $lis.each(function (i, e) {
          $(e).stop()
          .animate({
            'width': json[i].width,
            'top': json[i].top,
            'left': json[i].left,
            'opacity': json[i].opacity,
            'zIndex': json[i].zIndex
          }, 500);
        });
      });
    }
  });
})(jQuery);