HTML幻灯片？

Question

我看了一些与我的问题类似的问题，但我一直无法理解和解决问题。

           <script type="text/javascript">
            var images  = new Array();
            images[0]   = "http://ed-moore.net/html/assets/slideshow0.jpg";
            images[1]   = "http://ed-moore.net/html/assets/slideshow1.jpg";
            images[2]   = "http://ed-moore.net/html/assets/slideshow2.jpg";
            images[3]   = "http://ed-moore.net/html/assets/slideshow3.jpg";
            var current = 0;


            function changeImage(inc) {
                current += inc;
                document.getElementById("target").src = images[Math.abs(current)%images.length];
                setTimeout("changeImage()",1000);
            }

Answer 1

HTML幻灯片？

好吧，看看这个https://www.w3schools.com/w3js/w3js_slideshow.asp

使用Javascript库W3.JS https://www.w3schools.com/w3js/default.asp

或使用纯JS

var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1} 
    x[slideIndex-1].style.display = "block"; 
    setTimeout(carousel, 2000); // Change image every 2 seconds
}

Answer 2

要么您尚未发布所有相关代码，要么您遗漏了以下内容：

changeImage(1);

开始播放幻灯片并开始播放。

Answer 3

我绝对不会仅仅使用纯JavaScript。尝试并确保您的html是内容所在的位置，您的CSS是大多数样式所在的位置，然后使用JS来进行交互和移动。所有这一切，将实际图像从那里踢出来，留下html。然后在CSS中创建一个用于显示图像的类，然后创建一个用于隐藏的类。然后使用JavaScript添加/删除类。

Answer 4

HéctorManuelMartinezDurán的回答将解决这个问题，

但是如果你仍想使用纯Javascript，你可以阅读我的答案

1）尝试使用setInterval而不是使用setTimeout（setTimeout只执行一次，但setInterval将执行，直到页面关闭） 2）您没有执行该函数，您需要使用参数inc

运行该函数

所以代码将是：

var images  = new Array();
  images[0]   = "http://ed-moore.net/html/assets/slideshow0.jpg";
  images[1]   = "http://ed-moore.net/html/assets/slideshow1.jpg";
  images[2]   = "http://ed-moore.net/html/assets/slideshow2.jpg";
  images[3]   = "http://ed-moore.net/html/assets/slideshow3.jpg";
  var current = 0;

  function changeImage(inc) {
      current += inc;
      document.getElementById("target").src = images[Math.abs(current)%images.length];
  }

  setInterval(function() {
    changeImage(1);
  }, 1000);

尝试在javascript中自动播放幻灯片

4 个答案:

HTML幻灯片？