使用JavaScript的图片幻灯片

时间:2019-02-11 07:52:12

标签: javascript html

此代码在另一台计算机上运行良好,但在我的笔记本电脑上运行不正常。它与图像滑动有关。 我正在使用Google Chrome浏览器。

我已经使用VSCode编辑器在计算机上执行了相同的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript Image Slides</title>
    <link rel="stylesheet" href="style/slide.css">
</head>
<body>
  <div class="slider">
    <h2>JavaScript Image slider Project</h2>
    <hr>
    <img src="images/21.jpg" id="firstImage" alt="No image">
  </div>
<!-- <script src="slide.js"></script> -->

    <script>
       var images = [
    "11.jpg",
    "21.jpg",
    "31.jpg",
    "4.jpg",
    "5.jpg",
    "6.jpg",
    "7.jpg",
    "8.jpg",
    "9.jpg",
    "10.jpg"
    ];

var i=0;
  function slide(){
      document.getElementById("firstImage").src=images[i];
      if (i<(images.length-1)) 
          i++;
          else
          i=0;


  }

   setInterval(slide, 1000);
</script>
</body>
</html>

================================ 外部CSS文件。 js位于html文件中。

谢谢您的帮助。

0 个答案:

没有答案