Question

我正在创建一个图像滑块并使用JavaScript计时器前进到下一张图片。当用户点击前进或后退按钮时（见下图），幻灯片显示的时间会大大减少。我需要帮助使按钮前进滑动并同时重置计时器。我正在附加我的JavaScript，HTML和CSS来彻底覆盖我的代码。

我的JavaScript：

var imageShown = 1;
var total = 7;

function autoplay() {
    var image = document.getElementById('picture');
    imageShown = imageShown + 1;
    if(imageShown > total){imageShown = 1;}
    if(imageShown < 1){imageShown = total;} 
    picture.src = "Images/img"+ imageShown +".jpg";
    console.log("Pic Changed");
}

window.setInterval(autoplay, 5000);

function pic(x) {
    var image = document.getElementById('picture');
    imageShown = imageShown + x;
    if(imageShown > total){imageShown = 1;}
    if(imageShown < 1){imageShown = total;} 
    picture.src = "Images/img"+ imageShown +".jpg";
    console.log("Button clicked");
    window.clearInterval(autoplay);
    window.setInterval(autoplay, 5000);
}

我的HTML：

<img src="Images/img1.jpg" id="picture" >
<div class="left_div"><img onClick="pic(-1)" class="left_click" src="Images/left.png"></div>
<div class="right_div"><img onClick="pic(+1)" class="right_click" src="Images/right.png"></div>
</div>

我的CSS：

    margin:0px;
    }
#imageslider {
    height:700px;
    width:1000px;
    margin: 50px auto;
    position:absolute;
    border-radius:4px;
    overflow:hidden;
    padding-right: 5000px;
    padding-top: 1000px;
    }
#picture {
    height:750px;
    width:1000px;
    position:relative;
    padding-top: 50px
    }
.left_div {
    height: 750px;
    width: 150px;
    position: absolute;
    top: 250px;
    left: 0px;
}
.right_div {
    height: 750px;
    width: 150px;
    position: absolute;
    top: 250px;
    right: 0px;
}
.left_click {
    height:50px;
    width:50px;
    position:absolute;
    top:40%;
    left:20px;
    opacity:0;
    transition: all .2s ease-in-out 0s;
    }
.right_click {
    height:50px;
    width:50px;
    position:absolute;
    top:40%;
    right:20px;
    opacity:0;
    transition: all .5s ease-in-out 0s;
    }
.left_div:hover .left_click {
    opacity:0.6;
    }
.right_div:hover .right_click {
    opacity:0.6;
}
.left:hover .left1

Answer 1

您应该使用clearInterval，如下所示：

clearInterval(autoplay);

或

window.clearInterval(autoplay);

Answer 2

我认为你可能试图错误地重置间隔

http://www.w3schools.com/jsref/met_win_clearinterval.asp这给出了一个如何在javascript

中将函数集重置为间隔的示例

重置图像滑块的Javascript计时器

2 个答案: