自动播放 Javascript 轮播直到按钮被点击

Question

所以我有一个整洁的小旋转木马，可以通过单击向左或向右箭头来运行。

Javascript:

unitWidth = 760;
unitTotal = 4;
unitCtr = 1;

onLeftArrow = function(e) {
    //alert("Left");
    disableArrows();
    if (unitCtr<=unitTotal) {
        unitCtr++;
        TweenLite.to(productImg, 0.6, {x: "-="+unitWidth, onComplete:enableArrows });
    }
    hideArrows();
}

onRightArrow = function(e) {
    //alert("Right");
    disableArrows();
    if (unitCtr>1) {
        unitCtr--;
        TweenLite.to(productImg, 0.6, {x: "+="+unitWidth, onComplete:enableArrows });
    }
    hideArrows();
}

function hideArrows() {
    //alert(unitCtr)
    if (unitCtr <= 1) {
        arrowRight.style.visibility = "hidden";
        arrowLeft.style.visibility = "visible";
    }
    if (unitCtr >= unitTotal) {
        arrowRight.style.visibility = "visible";
        arrowLeft.style.visibility = "hidden";
    }
    if (unitCtr>1 && unitCtr<unitTotal) {
        arrowRight.style.visibility = "visible";
        arrowLeft.style.visibility = "visible";
    }
}

function disableArrows() { //ADDED NEW FUNCTION TO DISABLE ARROWS
    arrowLeft.removeEventListener('click', onLeftArrow, false);
    arrowRight.removeEventListener('click', onRightArrow, false);
}

function enableArrows() { //ADDED NEW FUNCTION TO RE-ENABLE ARROWS
    arrowLeft.addEventListener('click', onLeftArrow, false);
    arrowRight.addEventListener('click', onRightArrow, false);
}

HTML:

<div id="arrowL">
    <img src="arrow_click.png" width="100" height="415" />
</div>

<div id="arrowR">
    <img src="arrow_click.png" width="100" height="415" />
</div>

<div id="product_img">
    <div class="img_container" id="product1">
        <img src="panel1.jpg" class="product" />
    </div>
    <div class="img_container" id="product2">
        <img src="panel2.jpg" class="product" />
    </div>
    <div class="img_container" id="product3">
        <img src="panel3.jpg" class="product" />
    </div>
    <div class="img_container" id="product4">
        <img src="panel4.jpg" class="product" />
    </div>
</div>

我希望轮播一直自动播放一次，直到播放结束或有人点击箭头。有关执行此操作的最佳方法的任何建议？（我正在使用 GSAP 来处理实际运动）

Answer 1

尝试使用将处理转换的部分代码作为模块，以便 call/use 它们更容易。

请注意：我没有测试它，但它会让您了解轮播应该如何作为自动播放工作以及如何停止它。（您也可以添加其余代码，这只是关于新的或更新的部分。）

javascript:

var unitWidth = 760,
    unitTotal = 4,
    unitCtr = 1,
    interval;

onLeftArrow = function(e) {
    disableArrows();
    transition_forward();
    hideArrows();
}

function transition_forward(){
    if (unitCtr<=unitTotal) {
        unitCtr++;
        TweenLite.to(productImg, 0.6, {x: "-="+unitWidth, onComplete:enableArrows });
    }
}

function auto_play(){
    interval = setInterval(function(){
        transition_forward();
    }, 2500);
}

auto_play();

clearIV = function(){
    clearInterVal(interval );
}

arrowLeft.addEventListener('click', clearIV, false);
arrowRight.addEventListener('click', clearIV, false);

自动播放 Javascript 轮播直到按钮被点击

Autoplay Javascript carousel until button click

html

javascript

css

gsap