JavaScript中的上一个和下一个图像链接

我需要TweenMax.js上滑块的帮助

问题：

此示例有4个图像，单击每个图像将在全屏中打开。 但我没有得到上一个屏幕链接和下一个屏幕链接在全屏

预期结果：单击图像后，应在所有滑块中获得上一个图像超链接和下一个超链接

请注意：现在它正在处理最后一张图像和第一张图像。 即使我点击任何图片

请接受我的道歉，代码太大了

JSFIDDLE:

感谢您的帮助，提前谢谢

更新：

我觉得这个地方在JS，我们需要做出改变，但我可能错了

//next image link
TweenLite.set($expander_nav.last(), {
    x : 160,
    right : 4,
    left : 'auto',
    delay : delay
});
//first image link
TweenLite.set($expander_nav.first(), {
    x : -160,
    left : 4,
    right : 'auto',
    delay : delay,
    onComplete : function () {
        // add content to title overlay after delay
        $title.html(self.$cur_circle.siblings('.tagline').html());
    }
});

JAVASCRIPT

var HeroCircles = function(el) {
    this.$el = $(el);
    this.$circles = this.$el.find('.circle');
    this.$expander = this.$el.find('.circle-expander');
    this.$cur_circle = null;
  };

  HeroCircles.prototype._placeBG = function() {

    // get parent position and dimensions
    var self = this,
        parent_pos = this.$el.offset(),
        parent_width = this.$el.width(),
        parent_height = this.$el.height();

    this.$circles.each(function() {
      var $circle = $(this),
          offset = $circle.offset(),
          $bg = $circle.children('.bg');

      // set position
      $bg.css({
        'top': parent_pos.top - offset.top + 'px',
        'left': parent_pos.left - offset.left + 'px',
        'width': parent_width + 'px',
        'height': parent_height + 'px'
      });
    });

  };

  HeroCircles.prototype._animateInTitle = function(delay) {
    var self = this,
        $title = this.$expander.children('.title-overlay'),
        cur_class = this.$cur_circle.data('name'),
        $expander_nav = this.$expander.children('.expander-nav').children('a').not('.' + cur_class);

    TweenLite.set($expander_nav.last(), { x: 160, right: 4,  left: 'auto', delay: delay });
//Last image
    TweenLite.set($expander_nav.first(), {
      x: -160,
      left: 4,
      right: 'auto',
      delay: delay,
      onComplete: function() {
        // add content to title overlay after delay
        $title.html(self.$cur_circle.siblings('.tagline').html());
      }
    });
//Firstimage
    // animate in title overlay
    TweenLite.to($title, 0.5, {
      y: 40,
      delay: delay,
      ease: Back.easeOut
    });

    TweenLite.to($expander_nav, 0.15, {
      x: 0,
      delay: delay + 0.5
    });
  };

  HeroCircles.prototype._animateOutTitle = function() {
    var $title = this.$expander.children('.title-overlay'),
        cur_class = this.$cur_circle.data('name'),
        $expander_nav = this.$expander.children('.expander-nav').children('a').not('.' + cur_class);

    // animate out title overlay
    TweenLite.to($title, 0.5, {
      y: $title.outerHeight()
    });

    // animate out circles
    TweenLite.to($expander_nav.first(), 0.15, {
      x: -160
    });
    TweenLite.to($expander_nav.last(), 0.15, {
      x: 160
    });
  };

  HeroCircles.prototype._animateIn = function(circle) {
    var $circle = $(circle),
        $border = $circle.siblings('.border'),
        img = $circle.children('.bg').data('bg');

    // set current circle
    this.$cur_circle = $circle;

    // set bg image for expander div
    this.$expander.css('z-index', 4);
    this.$expander.children('.bg').css('background-image', 'url(' + img + ')');

    // add active class to li
    $circle.parent('li').addClass('active');

    // expand circle
    TweenLite.to($border, 0.3, {
      scale: 7
    });

    // fade in expander
    TweenLite.to(this.$expander, 0.5, {
      opacity: 1,
      delay: 0.5,
      onComplete: function() {
        TweenLite.set($border, { scale: 1 });
      }
    });

    // animate in title overlay
    this._animateInTitle(1);
  };

  HeroCircles.prototype._animateOut = function() {
    var self = this;

    // remove active class and scale down border
    this.$el.find('li').removeClass('active');

    // animate out title
    this._animateOutTitle();

    // fade out expander
    TweenLite.to(this.$expander, 0.5, {
      opacity: 0,
      delay: 0.5,
      onComplete: function() {
        self.$expander.css({
          'z-index': -1
        });
      }
    });

  };

  HeroCircles.prototype._animateSwitch = function(circle) {
    this._animateOutTitle();

    this.$cur_circle = $(circle);

    var img = this.$cur_circle.children('.bg').data('bg'),
        $bg = this.$expander.children('.bg');

    // switch active class
    this.$el.find('li').removeClass('active');
    this.$cur_circle.parent('li').addClass('active');

    TweenLite.to($bg, 0.3, {
      opacity: 0,
      delay: 0.5,
      onComplete: function() {
        $bg.css('background-image', 'url(' + img + ')');
        TweenLite.to($bg, 0.3, { opacity: 1 });
      }
    });

    this._animateInTitle(1);
  };

  HeroCircles.prototype.init = function() {
    var self = this;

    this._placeBG();

    // add click events
    this.$el.on('click', '.circle', function() {
      self._animateIn(this);
    });
    this.$el.find('.close-btn').on('click', function(e) {
      e.preventDefault();
      self._animateOut();
    });
    this.$expander.children('.expander-nav').on('click', 'a', function(e) {
      e.preventDefault();
      var new_class = $(this).attr('class'),
          $circle = self.$el.find('ul .' + new_class);

      console.log("new class is", new_class, "new circle is", $circle[0]);
      self._animateSwitch($circle);
    });
  };

  HeroCircles.prototype.initMobile = function() {
    var self = this,
        $mobile_slider = this.$el.find('.mobile-slider');

    this.$el.on('click', '.circle', function() {
      var $this = $(this),
          bg = $this.children('.bg').data('bg');

      self.$circles.removeClass('active');
      $this.addClass('active');

      $mobile_slider.html('<div>' + $this.siblings('.tagline').html() + '</div>');
      $mobile_slider.css('background-image', 'url(' + bg + ')');
    });

    this.$circles.first().trigger('click');
  };

  var hero_circles = new HeroCircles('.hero-circles');
  if ( window.innerWidth > 580 ) {
    hero_circles.init();
  } else {
    hero_circles.initMobile();
  }

var=function（el）{
这.$el=$（el）；
this.$circles=this.$el.find（'.circle'）；
this.$expander=this.$el.find（'.circle expander'）；
此值为.$cur_circle=null；
};
prototype.\u placeBG=function（）{
//获取父位置和维度
var self=这个，
父项位置=此。$el.offset（），
parent_width=此。$el.width（），
parent_height=此。$el.height（）；
这是$circles.each（函数（）{
变量$circle=$（此），
偏移量=$circle.offset（），
$bg=$circle.children（'.bg'）；
//设定位置
$bg.css({
“顶部”：父位置顶部-偏移量顶部+“px”，
“左”：父位置左-偏移量左+“px”，
“宽度”：父项宽度+px，
“高度”：父级_高度+px”
});
});
};
HeroCircles.prototype.\u animateInTitle=函数（延迟）{
var self=这个，
$title=this.$expander.children（'.title overlay'），
cur_class=this.$cur_circle.data（'name'），
$expander_nav=this.$expander.children（'.expander nav'）。children（'a'）。not（'.'+cur_类）；
set（$expander_nav.last（），{x:160，right:4，left:'auto'，delay:delay}）；
//最后图像
TweenLite.set（$expander_nav.first（）{
x:-160，
左:4,，
右图：“自动”，
延迟：延迟，
onComplete:function（）{
//延迟后将内容添加到标题覆盖
$title.html（self.$cur_circle.sides（'.tagline'）.html（））；
}
});
//第一映像
//在标题覆盖中设置动画
TweenLite.至（$title，0.5{
y:40，
延迟：延迟，
放松：后退
});
TweenLite.至（$0.15）{
x:0,，
延迟：延迟+0.5
});
};
HeroCircles.prototype.\u animateoutitle=function（）{
var$title=this.$expander.children（'.title overlay'），
cur_class=this.$cur_circle.data（'name'），
$expander_nav=this.$expander.children（'.expander nav'）。children（'a'）。not（'.'+cur_类）；
//设置标题覆盖的动画
TweenLite.至（$title，0.5{
y:$title.outerHeight（）
});
//画出圆的动画
TweenLite.to（$expander_nav.first（），0.15{
x:-160
});
TweenLite.to（$0.15）{
x:160
});
};
HeroCircles.prototype.\u animateIn=函数（圆）{
变量$circle=$（circle），
$border=$circle.BINDERS（'.border'），
img=$circle.children（'.bg'）.data（'bg'）；
//设置当前循环
这个。$cur_circle=$circle；
//设置扩展器div的bg映像
这是.expander.css（'z-index'，4）；
这个.expander.children（'.bg'）.css（'background-image'，'url（'+img+'））；
//将活动类添加到li
$circle.parent（'li'）.addClass（'active'）；
//展开圆
TweenLite.至（$border，0.3{
比例：7
});
//渐入扩展器
TweenLite.至（此.$expander，0.5{
不透明度：1，
延迟：0.5，
onComplete:function（）{
TweenLite.set（$border，{scale:1}）；
}
});
//在标题覆盖中设置动画
本章第（1）节；
};
prototype.\u animateOut=function（）{
var self=这个；
//删除活动类并缩小边框
这个.el.find（'li'）.removeClass（'active'）；
//制作标题动画
这个；
//淡出扩展器
TweenLite.至（此.$expander，0.5{
不透明度：0，
延迟：0.5，
onComplete:function（）{
self.$expander.css({
“z索引”：-1
});
}
});
};
HeroCircles.prototype.\u animateSwitch=函数（圆）{
这个；
这个.$cur_circle=$（circle）；
var img=此.$cur_circle.children（'.bg'）.data（'bg'），
$bg=this.$expander.children（'.bg'）；
//开关活动类
这个.el.find（'li'）.removeClass（'active'）；
此.cur_circle.parent（'li'）.addClass（'active'）；
特威利特至（$bg，0.3{
不透明度：0，
延迟：0.5，
onComplete:function（）{
$bg.css（'background-image'，'url（'+img+'））；
TweenLite.to（$bg，0.3，{不透明度：1}）；
}
});
本章第（1）节；
};
herocycles.prototype.init=函数（）{
var self=这个；
这个；
//添加点击事件
此.el.on（'click'，'circle'，函数（）{
赛尔夫（这个）；
});
此.$el.find（'.close btn'）。打开（'click'，函数（e）{
e、 预防默认值（）；
self._animateOut（）；
});
这是。$expander.children（'.expander-nav'）。关于（'click'，'a'，函数（e）{
e、 预防默认值（）；
var new_class=$（this.attr（'class'），
$circle=self.$el.find（'ul.'+new_类）；
log（“new class is”，“new_class”，“new circle is”，“$circle[0]）；
self._animateSwitch（$circle）；
});
};
herocycles.prototype.initMobile=函数（）{
var self=这个，
$mobile_slider=this.$el.find（'.mobile slider'）；
此.el.on（'click'，'circle'，函数（）{
变量$this=$（this），
bg=$this.children（'.bg'）.data（'bg'）；
self.$circles.removeClass（'active'）；
$this.addClass（'active'）；
$mobile_slider.html（“”+$this.sibli