[英]Javascript Slideshow with play pause and Next Prev button
I'm making a slideshow in Javascript with a Play / Pause and Next / Prev. 我正在用Javascript进行幻灯片播放,包括“播放/暂停”和“下一个/上一个”。 I have manage to slideshow working with play/pause button, but now i wanted to add Next and Prev button to it.
我可以使用“播放/暂停”按钮来进行幻灯片播放,但是现在我想向其添加“下一个”和“上一个”按钮。 Can some one please help me how can i do that.
有人可以帮我怎么做。
Here's my HTML: 这是我的HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple HTML Slideshow</title>
<style type="text/css">
#slideshow {
margin: 50px auto;
position: relative;
width: 900px;
height: 450px;
padding: 10px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow > div > img {
width: 100%;
}
#button { text-align: center; }
</style>
<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</head>
<body>
<div id="slideshow">
<div>
<img name="slide" id="imgSlideshow" src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg">
</div>
</div>
<div id="button">
<a href="#" id="prevBtn" onclick="showPrev()">Prev</a>
<a href="#" id="startCycle" onclick="setTimer()">Play/Pause</a>
<a href="#" id="nextBtn" onclick="showNext()">Next</a>
</div>
</body>
</html>
Here is JavaScript: 这是JavaScript:
<script language="javascript" type="text/javascript">
var i = 0;
var path = new Array();
//var timer = setInterval("slide()",2000);
var timer;
// LIST OF IMAGES
path[0] = "http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg";
path[1] = "http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg";
path[2] = "http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg";
path[3] = "http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg";
function slide() {
document.getElementById("imgSlideshow").src = path[i];
i = (i + 1)%path.length;
//console.log(i);
}
function setTimer(){
if (timer) {
// stop
clearInterval( timer );
timer=null;
}
else {
timer = setInterval("slide()",2000);
}
}
var imgNumber = 1;
var numberOfImg = path.length;
function previousImage() {
if(imgNumber > 1) {
imgNumber--;
}
else {
imgNumber = numberOfImg;
}
document.getElementById("imgSlideshow").src = path[imgNumber-1];
changeCounter(imgNumber, numberOfImg);
}
function nextImage(){
if(imgNumber < numberOfImg){
imgNumber++
}
else{
imgNumber = 1
}
document.getElementById("imgSlideshow").src = path[imgNumber-1];
changeCounter(imgNumber, numberOfImg);
}
function changeCounter(cur, total) {
document.getElementById("counter").innerHTML = cur + "/" + total;
}
document.getElementById("counter").innerHTML = 1 + "/" + path.length;
</script>
Any Help is appreciated and thanks in advance. 任何帮助表示赞赏,并在此先感谢。
Only minor changes in the logic. 逻辑上只有微小的变化。
var imgNumber = 0; var path = ["http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg", "http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg", "http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg", "http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg" ]; var numberOfImg = path.length; var timer = null; function slide() { imgNumber = (imgNumber + 1) % path.length; console.log(imgNumber); document.getElementById("imgSlideshow").src = path[imgNumber]; changeCounter(imgNumber + 1, numberOfImg); } function setTimer() { if (timer) { clearInterval(timer); timer = null; } else { timer = setInterval(slide, 2000); } return false; } function previousImage() { --imgNumber; if (imgNumber < 0) { imgNumber = numberOfImg - 1; } document.getElementById("imgSlideshow").src = path[imgNumber]; changeCounter(imgNumber + 1, numberOfImg); return false; } function nextImage() { ++imgNumber; if (imgNumber > (numberOfImg - 1)) { imgNumber = 0; } document.getElementById("imgSlideshow").src = path[imgNumber]; changeCounter(imgNumber + 1, numberOfImg); return false; } function changeCounter(cur, total) { document.getElementById("counter").innerHTML = cur + "/" + total; } document.getElementById("counter").innerHTML = 1 + "/" + path.length;
#slideshow { margin: 50px auto; position: relative; width: 900px; height: 450px; padding: 10px; } #slideshow > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; } #slideshow > div > img { width: 100%; } #button { text-align: center; }
<div id="slideshow"> <div> <img name="slide" id="imgSlideshow" src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg"> </div> </div> <div id="button"> <a href="#" id="prevBtn" onclick="return previousImage()">Prev</a> <a href="#" id="startCycle" onclick="return setTimer()">Play/Pause</a> <a href="#" id="nextBtn" onclick="return nextImage()">Next</a> </div> <div id="counter"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.