Javascript 图像旋转木马赢得'；反向无限循环

我正在创建一个包含三个图像的HTML5图像转盘。过渡是通过TweenMax和TimeLine完成的。我有两个单击事件，一个用于下一个图像，一个用于上一个图像，下一个图像函数正常运行，是一个无限循环，但上一个函数在遍历图像一次后停止。这是代码

HTML:

<div id="expanded-state">
    <div id="expanded-exit"></div>
    <div id="close-btn"></div>
    <button id="arrow-prev"></button>
    <button id="arrow-next"></button>
    <div id="theater">
        <div class="theater"></div>
        <div class="theater"></div>
        <div class="theater"></div>
    </div>
    <div id="cta"></div>
    <div id="footer"></div>
  </div>
</div>

JS:

var$slides=$（“.theater”）；
var currentSlide=0；
函数addListeners（）{
arrowPrev.addEventListener（'click'，theaterScrollPrev）；
arrowNext.addEventListener（'click'，theaterScrollNext）；
}
函数theaterScrollNext（）{
tm.to（$slides.eq（currentSlide），0.5，{左：“-970px”}）；
如果（当前幻灯片<$slides.length-1）{
currentSlide++；
}
否则{
currentSlide=0；
}
tm.fromTo（$slides.eq（currentSlide），0.5，{左：“970px”}，{左：“0px”}）；
}
函数theaterScrollPrev（）{
tm.to（$slides.eq（currentSlide），0.5，{左：“970px”}）；
如果（当前幻灯片<$slides.length-1）{
当前幻灯片--；
}
否则{
currentSlide=0；
}
tm.fromTo（$slides.eq（currentSlide），0.5，{left:-970px}，{left:-0px}）；
}

我相信这应该能解决问题，但如果不能，请告诉我

    function theaterScrollPrev() {
    console.log('previous clicked')
    tm.to( $slides.eq(currentSlide), 0.5, {left:"970px"} );     

    if (currentSlide <= 0) {
        currentSlide = $slides.length -1;
  } else {
    currentSlide--;
    }

      tm.fromTo( $slides.eq(currentSlide), 0.5, {left: "-970px"}, {left:"0px"} );
}

函数theaterScrollPrev（）{
console.log（'上一次单击'）
tm.to（$slides.eq（currentSlide），0.5，{左：“970px”}）；
如果（currentSlide我认为这应该可以解决它，但如果不能，请告诉我

    function theaterScrollPrev() {
    console.log('previous clicked')
    tm.to( $slides.eq(currentSlide), 0.5, {left:"970px"} );     

    if (currentSlide <= 0) {
        currentSlide = $slides.length -1;
  } else {
    currentSlide--;
    }

      tm.fromTo( $slides.eq(currentSlide), 0.5, {left: "-970px"}, {left:"0px"} );
}

函数theaterScrollPrev（）{
console.log（'上一次单击'）
tm.to（$slides.eq（currentSlide），0.5，{左：“970px”}）；
如果（currentSlide谢谢@Riddell，但这并没有解决问题。第一张幻灯片显示在页面加载上，但当您单击“上一页”时，它会变成一个空白框。您能制作一个JSFIDLE让我自己试试吗？这将有助于理解问题。没问题！很高兴我能提供帮助。@Ryancopeland谢谢@Riddell，但这并没有解决问题。第一张幻灯片de显示在页面加载中，但当您单击“上一步”时，它会显示为一个空白框。您能制作一个JSIDLE以便我可以自己尝试一下吗？Ryan？这将有助于理解这个问题。没问题！很高兴我能提供帮助。@Ryancopeland稍微扩展了我的问题。jQuery太庞大了，所以我想知道是否有一种普通的js方法可以完成同样的功能在上。我的js排骨还没有那么好。谢谢。你应该设置
x
属性的动画，而不是
left
属性的动画，这样你就可以在亚像素级上设置动画。CSS位置偏移，如
left
仅在像素级上设置动画。设置
x
和
y
的动画将利用硬件加速。一个将CSS位置偏移设置为
left
会触发布局，而不会为您提供流畅的动画。稍微扩展一下我的问题。jQuery太庞大了，所以我想知道是否有一种普通的js方法可以实现同样的功能。我的js排骨还没有那么好。谢谢。您应该设置
x
属性的动画，而不是设置
left
属性，以便您可以在亚像素级别上设置动画。像
left
这样的CSS位置偏移仅在像素级别上设置动画。设置
x
和
y
动画将利用硬件加速。设置像
left
这样的CSS位置偏移动画将触发布局，而不会为您提供平滑的动画效果尼默兹。
    function theaterScrollPrev() {
    console.log('previous clicked')
    tm.to( $slides.eq(currentSlide), 0.5, {left:"970px"} );     

    if (currentSlide <= 0) {
        currentSlide = $slides.length -1;
  } else {
    currentSlide--;
    }

      tm.fromTo( $slides.eq(currentSlide), 0.5, {left: "-970px"}, {left:"0px"} );
}