重置图像滑块的 Javascript 计时器 [英] Reset Javascript Timer for Image Slider

问题描述

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

我的 JavaScript:

var imageShown = 1;无功总数 = 7;功能自动播放(){var image = document.getElementById('图片');图像显示 = 图像显示 + 1;if(imageShown > total){imageShown = 1;}if(imageShown < 1){imageShown = total;}图片.src = "图片/img"+ imageShown +".jpg";console.log("图片已更改");}window.setInterval(自动播放，5000)；功能图片(x){var image = document.getElementById('图片');imageShown = imageShown + x;if(imageShown > total){imageShown = 1;}if(imageShown < 1){imageShown = total;}图片.src = "图片/img"+ imageShown +".jpg";console.log("按钮被点击");window.clearInterval(自动播放)；window.setInterval(自动播放，5000)；}

我的 HTML:

<img src="Images/img1.jpg" id="图片" ><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>

我的 CSS:

 margin:0px;}#imageslider {高度:700px；宽度:1000px；边距:50px 自动；位置:绝对；边框半径:4px；溢出:隐藏；padding-right: 5000px;填充顶部:1000px；}#图片 {高度:750px；宽度:1000px；位置:相对；填充顶部:50px}.left_div {高度:750px；宽度:150px；位置:绝对；顶部:250px；左:0px；}.right_div {高度:750px；宽度:150px；位置:绝对；顶部:250px；右:0px；}.left_click {高度:50px；宽度:50px；位置:绝对；顶部:40%；左:20px；不透明度:0;过渡:所有 .2 秒的缓入缓出 0；}.右键点击 {高度:50px；宽度:50px；位置:绝对；顶部:40%；右:20px；不透明度:0;过渡:所有 0.5 秒的缓入缓出 0；}.left_div:hover .left_click {不透明度:0.6；}.right_div:hover .right_click {不透明度:0.6；}.left:悬停 .left1

解决方案

我认为您可能尝试错误地重置间隔

http://www.w3schools.com/jsref/met_win_clearinterval.asp 这个给出了如何在 javascript 中将函数设置为间隔的示例

I am creating an image slider and using a JavaScript timer to advance to the next picture. When the user clicks on the forward or back button (see picture below) the time the slide is displayed decreases greatly. I need help making the buttons advance the slide and reset the timer and the same time. I am attaching my JavaScript, HTML, and CSS to cover my code thoroughly.

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

My 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>

My 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

解决方案

I think that you might be trying to reset the interval incorrectly

http://www.w3schools.com/jsref/met_win_clearinterval.asp this gives an example of how to reset a function set to an interval in javascript

这篇关于重置图像滑块的 Javascript 计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！