Question

我是JavaScript的新手，我正在尝试实现一个滑块。以下是我要解决的javascript代码。

<html>
  <head> 
    <title> Home Page </title>
    <script type="text/javascript" src="w3.js">
      $("#slideshow > div:gt(0)").hide();

      setInterval(function() {
        $('#slideshow > div:first')
          .fadeOut(1000)
          .next()
          .fadeIn(1000)
          .end()
          .appendTo('#slideshow');
      }, 3000);
    </script>
  </head>
  <body>
    <div id="slideshow">
      <div>
        <img src="http://vectorlogofree.com/wp-content/uploads/2014/04/23656-apple-logo-icon-vector-icon-vector-eps.png">
      </div>
      <div>
        <img src="http://vignette4.wikia.nocookie.net/memoryalpha/images/0/02/Linux_icon.png/revision/latest?cb=20141003183250&path-prefix=en">
      </div>
      <div>
      </div>
    </div>
  </body>
</html>

它不起作用，图像是静态的。知道为什么吗？感谢您提前帮助。

Answer 1

如果将以下css添加到父元素和子元素中，则定位问题已修复：

CSS：

#slideshow {
  position: relative;
}

#slideshow > div{
  position: absolute;
}

这是一个演示： https://jsfiddle.net/cjd5ja7d/2/

但您是否考虑过为幻灯片显示使用外部jquery插件？这里有一些很好的例子：

https://bxslider.com/（易于使用）
http://idangero.us/swiper/（更多高级）

Answer 2

您需要使用 jquery 才能使用该插件。

<html>
  <head> 
    <title>
      Home Page
    </title>
    <!-- here -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script type="text/javascript">
      $("#slideshow > div:gt(0)").hide();

      setInterval(function() {
        $('#slideshow > div:first')
          .fadeOut(1000)
          .next()
          .fadeIn(1000)
          .end()
          .appendTo('#slideshow');
      }, 3000);
    </script>
  </head>
  <body>
    <div id="slideshow">
      <div>
        <img src="http://vectorlogofree.com/wp-content/uploads/2014/04/23656-apple-logo-icon-vector-icon-vector-eps.png">
      </div>
      <div>
        <img src="http://vignette4.wikia.nocookie.net/memoryalpha/images/0/02/Linux_icon.png/revision/latest?cb=20141003183250&path-prefix=en">
      </div>
      <div>
      </div>
    </div>
  </body>
</html>

查看@Jiib答案以解决您的样式问题，您将完成。

JavaScript幻灯片显示不起作用（图像是静态的）

2 个答案: