Question

我是JQuery的新手，我想创建一个图片幻灯片。我下载了最新版本的jquery。这是我的HTML代码

   <!DOCTYPE html>
   <html>
   <head>

   <script src="jquery-3.2.1.min.js"></script>
   <script src="jq.js"></script>
   <link rel="stylesheet" type="text/css" href="stl.css">


   </head>
   <body>

   <div id = "slideshow">

    <img src="images/chale-wote.jpg">
    <img src="images/accranight2.jpg">
    <img src="images/accra1.jpg">
    <img src="images/holidayinn.jpg">
    <img src="images/elmina.jpg">


    </div>


   </body>
   </html>

这是我的JQUERY代码，我把它保存为jq.js

      $("#slideshow > div").hide();    

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

当我运行它不起作用。任何帮助表示赞赏。感谢

Answer 1

在您的HTML代码中，您img内有#slideshow。但是在你的jq中，你试图隐藏并在div内显示#slideshow。哪个不存在。

将您的代码更改为

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">

  <img src="http://via.placeholder.com/350x150">
  <img src="http://via.placeholder.com/450x250">
  <img src="http://via.placeholder.com/250x250">
  <img src="http://via.placeholder.com/450x150">
  <img src="http://via.placeholder.com/350x100">
</div>

＆＃13;

在JQuery中创建幻灯片

1 个答案: