Question

现在我正在学习html，css和javascript。

现在我正在使用html，css和javascript幻灯片。

以下是幻灯片显示的代码：Javascript

 $("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
      $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);

并在html中调用js文件，如下所示：

<script type = "text/javascript" src= "js/slide.js"></script>

但是图片显示有序，幻灯片显示不起作用。我的页面看起来像http://imgur.com/TwyQcIA

我可以知道，我的错误是什么？

任何帮助都将受到高度赞赏。

提前致谢。

Answer 1

你错过了这一行的孩子

 $('#slideshow > img:first')

$("#slideshow > div:gt(0)").hide();
setInterval(function() { 
      $('#slideshow > div:first-child')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <div><img src="http://lorempixel.com/200/200/sports/1" width="200" height="200"/></div>
  <div><img src="http://lorempixel.com/200/200/sports/2" width="200" height="200"/></div>
  <div><img src="http://lorempixel.com/200/200/sports/3" width="200" height="200"/></div>
  <div><img src="http://lorempixel.com/200/200/sports/4" width="200" height="200"/></div>
  </div>

javascript幻灯片无效

1 个答案: