Question

我想要完成的是，当我点击左键或右键时，我希望间隔重新开始，即使我清除它，它也会停留。这里是代码和JSFiddle来看问题：

的jsfiddle

HTML：

<div id="hero">
    <span id="left"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
    <span id="right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
    <div id="slider_container" style="width : 400%; margin-left:0;">
        <div class="slider_item" style="background-color : #c612d2;">
            <div class="hero_text">
                <h1>Some text for testing purposes</h1>
                <h3>This is is just a dummy text for demonstration shown a subtitle</h3>
            </div>
        </div>
        <div class="slider_item" style="background-color: #1294d2;">
            <div class="hero_text">
                <h1>Some text for testing purposes</h1>
                <h3>This is is just a dummy text for demonstration shown a subtitle</h3>
            </div>
        </div>
        <div class="slider_item" style="background-color: #d21262;">
            <div class="hero_text">
                <h1>Some text for testing purposes</h1>
                <h3>This is is just a dummy text for demonstration shown a subtitle</h3>
            </div>
        </div>
        <div class="slider_item" style="background-color: #ff4d4d;">
            <div class="hero_text">
                <h1>Some text for testing purposes</h1>
                <h3>This is is just a dummy text for demonstration shown a subtitle</h3>
            </div>
        </div>
    </div>
    <div class="cercles">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

CSS

* {
  font-family : sans-serif;
}
#hero {
  width : 90%;
  height : 300px;
  background-color : #777eee;
  margin : 30px auto;
  overflow : hidden;
  position : relative;
}
span#right {
  right : 0;
}
span#left {
  left : 0;
}
#hero > span {
  display : block;
  position : absolute;
  top : 0;
  bottom : 0;
  margin : auto;
  width : 50px;
  height : 70px;
  background-color : rgba(0,0,0,0.5);
  cursor : pointer;
  z-index : 10;
  color : #fff;
  font-size : 20px;
  box-sizing : border-box;
  padding : 25px 17px;
}
#hero > span:hover {
  background-color: rgba(0,0,0,1);
}
div#slider_container {
  height : 100%;
  font-size : 0;
  transition: margin-left 1s cubic-bezier(0.15, 0.75, 0.5, 1);
}
div.slider_item {
  width : 25%;
  height : 100%;
  display : inline-block;
  position : relative;
}
div.slider_item > div.hero_text {
  position : absolute;
  bottom : 15%;
  left : 15%;
  color : #fff;
}

div.hero_text > h1 {
  font-size : 24px;
}
div.hero_text > h3 {
  font-size : 14px;
}

div#hero > div.cercles {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    width: 120px;
    bottom: 10%;
}
div#hero > div.cercles > span {
    width: 15px;
    height: 15px;
    margin: 0 5px;
    display: inline-block;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    cursor: pointer;
}
div#hero > div.cercles > span:hover {
    background-color: #fff;
}

的JavaScript

var leftBtn = document.getElementById("left"),
    righBtn = document.getElementById("right"),
    sldierContainer = document.getElementById("slider_container"),
    sliderItem =  document.getElementsByClassName("slider_item");

function goLeft (){
    if (parseInt(sldierContainer.style.marginLeft) == 0){
      sldierContainer.style.marginLeft = -(sliderItem.length-1)*100 + "%";
    } else {
      sldierContainer.style.marginLeft = (parseInt(sldierContainer.style.marginLeft)+100) + "%";
    }
}

function goRight (){
    if (-parseInt(sldierContainer.style.marginLeft) >= (sliderItem.length-1)*100){
      sldierContainer.style.marginLeft = 0;
    } else {
      sldierContainer.style.marginLeft = (parseInt(sldierContainer.style.marginLeft)-100) + "%";
    }
}

var goRightInterval = setInterval(goRight,7000);

leftBtn.addEventListener('click',function(){
  goLeft();
  clearInterval(goRightInterval);
  var goRightInterval = setInterval(goRight,7000);
});

righBtn.addEventListener('click',function(){
  goRight();
  clearInterval(goRightInterval);
  var goRightInterval = setInterval(goRight,7000);
});

Answer 1

我认为你的问题是由于重新声明了var goRightInterval。

事件处理程序var goRightInterval = setInterval(goRight,7000);中的语句应改为goRightInterval = setInterval(goRight,7000);

Answer 2

leftBtn.addEventListener('click',function(){
  goLeft();
  clearInterval(goRightInterval);
  goRightInterval = setInterval(goRight,3000);
});

righBtn.addEventListener('click',function(){
  goRight();
  clearInterval(goRightInterval);
  goRightInterval = setInterval(goRight,3000);
});

您将goRightInterval重新声明为vars。您想要返回全局范围，因此只需删除var声明。

Answer 3

删除这样的var：

var goRightInterval = setInterval(goRight,7000);

leftBtn.addEventListener('click',function(){
  goLeft();
  clearInterval(goRightInterval);
  goRightInterval = setInterval(goRight,7000);
});

righBtn.addEventListener('click',function(){
  goRight();
  clearInterval(goRightInterval);
  goRightInterval = setInterval(goRight,7000);
});

Answer 4

您可以将区间定义为单击函数的局部变量，只需执行以下操作：

var goRightInterval = setInterval(function(){goRight()},7000);

leftBtn.addEventListener('click',function(){
  goLeft();
  clearInterval(goRightInterval);
  goRightInterval = setInterval(function(){goRight()},7000);
});

righBtn.addEventListener('click',function(){
  goRight();
  clearInterval(goRightInterval);
  goRightInterval = setInterval(function(){goRight()},7000);
});

点击后不能重置间隔

4 个答案: