简体   繁体   中英

It doesn't move to the next image

I am trying to create a slideshow. I have created two buttons because I want to do it in two ways. One way is when I press the next button to move to the next image(single image movement) and when I press the slideshow button to make it move along with not pressing a button. I didn't manage to fix it. Please help me if you can.

 var img = new Array(); img[0] = "https://images-na.ssl-images-amazon.com/images/I/5101NtSnx0L._AC_.jpg"; img[1] = "https://thumbor.forbes.com/thumbor/fit-in/1200x0/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5ecc17cdfd6d6700060f826c%2F0x0.jpg"; img[2] = "https://cdn.episode.ninja/file/episodeninja/4090819.jpg"; img[3] = "https://i.pinimg.com/564x/f0/e5/a9/f0e5a984f263b7ecb5c9cd26a493a115.jpg"; function Next() { if (i < img.length - 1) i++; else i = 0; document.getElementById("img1").src = img[i]; } startslideshow() { id = window.setInterval("Next()", 1000); var x = document.getElementById("txt").value; id2 = window.clearTimeout("Cancel()", x * 1000) }
 <body> <img id="img1" height="300" width="300" src="https://2.bp.blogspot.com/-ho7KT0UEARE/VPbiU-U_KSI/AAAAAAAALVM/iZdcRS6KHvQ/s1600/Acrobatty%2BBunny%2B-%2BRobert%2BMcKimson%2B(3).jpg" /> <br> <button id="Next" onclick="Next()"> Next </button> <button onclick="startslideshow()">startSlideShow</button> </body>

here is the solution that we have came up with

<body>
  <img id="img1" height="300" width="300" src="https://2.bp.blogspot.com/-ho7KT0UEARE/VPbiU-U_KSI/AAAAAAAALVM/iZdcRS6KHvQ/s1600/Acrobatty%2BBunny%2B-%2BRobert%2BMcKimson%2B(3).jpg" /> <br>
  <button id="Next" onclick="Next()"> Next </button>
  <button onclick="startslideshow()">startSlideShow</button>
  <button onclick="stopslideshow()">stopSlideShow</button>
</body>
var img = new Array();
var cur = 0;
var timer = null;

img[0] = "https://images-na.ssl-images-amazon.com/images/I/5101NtSnx0L._AC_.jpg";
img[1] = "https://thumbor.forbes.com/thumbor/fit-in/1200x0/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5ecc17cdfd6d6700060f826c%2F0x0.jpg";

img[2] = "https://cdn.episode.ninja/file/episodeninja/4090819.jpg";
img[3] = "https://i.pinimg.com/564x/f0/e5/a9/f0e5a984f263b7ecb5c9cd26a493a115.jpg";

function Next() {
  cur = (cur < img.length - 1) ? cur + 1 : 0;
  document.getElementById("img1").src = img[cur];
}

function startslideshow() {
  timer = setInterval(function() {
    Next();
  }, 500);
}

function stopslideshow() {
  if (timer) {
     clearInterval(timer);
     timer = null;
  }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM