Question

我正在创建一个包含三个图像的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>

CSS：

.theater {
    width: 970px;
    height: 345px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.theater:nth-child(1){
    background: url(theater-01.jpg);
}

.theater:nth-child(2){
    background: url(theater-02.jpg);
}

.theater:nth-child(3){
    background: url(theater-03.jpg);
}

JS：

var $slides = $(".theater");
var currentSlide = 0;

function addListeners() {
    arrowPrev.addEventListener('click', theaterScrollPrev);
    arrowNext.addEventListener('click', theaterScrollNext);
}

function theaterScrollNext() {

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

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

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

function theaterScrollPrev() {

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

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

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

Answer 1

我相信这应该解决它，但告诉我它是否

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

Codepen Fixed

图像轮播无法以反向无限循环

1 个答案: