Javascript:幻灯片点击时不滑动

Question

我有简单的代码，其中幻灯片放映每 5000 毫秒自动幻灯片一次。

现在我尝试制作按钮，当我单击此按钮时，下一个图像不会每 5000 毫秒滑动一次，但当我单击时。

当我编写像此浏览器这样的代码时，会出现错误。

有什么解决方案或者我需要制作 ned 幻灯片吗？

这是原始代码:

function cycleBackgrounds() {
var index = 0;

$imageEls = $('.container .slide');

setInterval(function () {
    index = index + 1 < $imageEls.length ? index + 1 : 0;
    $imageEls.eq(index).addClass('show');
    $imageEls.eq(index - 1).removeClass('show');

}, 5000);
};

$(function () {
    cycleBackgrounds();
});

这是添加的代码:

function rightSlide() {
    index = index + 1 < $imageEls.length ? index + 1 : 0;
    $imageEls.eq(index).addClass('show');
    $imageEls.eq(index - 1).removeClass('show');
  }

编辑添加的 HTML

<section class="slide show" style="background-image: url('https://s7img.ftdi.com/is/image/ProvideCommerce/FTD_19_EDAY_19M3_HP_HEROBANNER?$ftd-product-banner-lv$');">
    <div class="slide-content-wrapper">
        <div class="slide-content">
            <h2>02</h2>
        </div>
    </div>
</section>
<section class="slide" style="background-image: url('https://s7img.ftdi.com/is/image/ProvideCommerce/FTD_19_EDAY_19M3_HP_HEROBANNER?$ftd-product-banner-lv$');">
    <div class="slide-content-wrapper right">
        <div class="slide-content">
            <h2>01</h2>
        </div>
    </div>
</section>

Answer 1

问题是您正在创建一个间隔，然后从未清除它。这意味着一旦创建了间隔，它将永远持续下去(当前)。您可以阅读有关间隔的更多信息 here .

简单说明一下如何解决:

1. 您需要将间隔分配给变量
2. 当您想手动更改图像时，请清除间隔

来自网站的代码片段:

var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
  clearInterval(myVar);
} 

在代码内部，创建间隔时，您需要将其分配给变量和函数内部 rightSlide()你需要清除它clearInterval(<yourIntervalHere>);

var intervalVariable = setInterval(function () {
    index = index + 1 < $imageEls.length ? index + 1 : 0;
    $imageEls.eq(index).addClass('show');
    $imageEls.eq(index - 1).removeClass('show');
}, 5000);

function rightSlide() {
    clearInterval(intervalVariable);
    index = index + 1 < $imageEls.length ? index + 1 : 0;
    $imageEls.eq(index).addClass('show');
    $imageEls.eq(index - 1).removeClass('show');
}