Javascript幻灯片播放暂停和下一个上一个按钮

时间：2022-08-23 22:44:42

I'm making a slideshow in Javascript with a Play / Pause and Next / Prev. 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.

我正在使用Play / Pause和Next / Prev在Javascript中制作幻灯片。我已经设法使用播放/暂停按钮进行幻灯片放映,但现在我想添加下一个和上一个按钮。有人可以帮助我,我该怎么做。

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.

任何帮助表示赞赏,并提前致谢。

1 个解决方案

#1

0  

Only minor changes in the logic.

只有逻辑上的微小变化。

Try this:

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>

#1

0  

Only minor changes in the logic.

只有逻辑上的微小变化。

Try this:

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>

标签：

相关文章