Question

大家好我想在我的网站上制作无限循环的图像幻灯片。我已经研究了几个网站，仍然无法正确获取代码，因为只有html代码中的图像显示，图像没有变化....请问我做错了什么？以下是幻灯片中涉及的代码：

的javascript：

statusText

HTML：

    var imageArray = ["media/Chicken Itza.jpg", "media/Christ the Redeemer.jpg", "media/Colosseum.jpg", "media/Great Wall of China.jpg", "media/Machu Picchu.jpg", "media/Petra.jpg", "media/TajMahal.jpeg"]
    var imageIndex = 0; 
    var mainImage = document.getElementById('mainImage')
    mainImage.src = imageArray[0]

    function slideshow() {
        mainImage.innerHTML(imageArray[imageIndex]);
        imageIndex = imageIndex++;
        if (imageIndex > imageArray.length - 1) {
            imageIndex = 0;
        }
    }

至于我的完整代码，它是： HTML：

<body onload="slideshow()">
<img id="mainImage"class="mainslides animate-fading" src="media/Chicken Itza.jpg">
</body>

的javascript：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author(s)" content="Nathan , Jacob , Tee Kiat">
    <meta name="description" content="FED project by Nathan Jacob and Tee Kiat">
    <title>FED assignment (7 wonders of the world)</title>
    <link rel="stylesheet" href="7 wonders.css">
    <script src="index.js"></script>
</head>
<body onload="slideshow()">

    <div id="hmenu" class="hamburger_menu">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">x</a>
        <a href="javascript:void(0)" id="main_gwow">The 7 wonders of the world<br>=====================</a>
        <a href="#" id="gwow1">Great Wall of China</a><br><!--China-->
        <a href="#" id="gwow2">Petra</a><br><!--Jordan-->
        <a href="#" id="gwow3">Christ the Redeemer</a><br><!--Brazil-->
        <a href="#" id="gwow4">Machu Picchu</a><br><!--Peru-->
        <a href="#" id="gwow5">Chicken Itza</a><br><!--Mexico-->
        <a href="#" id="gwow6">Colosseum</a><br><!--Italy-->
        <a href="#" id="gwow7">Taj Mahal</a><!--India-->
    </div>
        <span id="hamspan" style="font-size:30px;cursor:pointer;" onclick="openNav()">&#9776</span>
        <h1 id="title">The 7 wonders of the World</h1><br>

    <section id="generalimg">
        <img id="mainImage"class="mainslides animate-fading" src="media/Chicken Itza.jpg">
    </section>    


</body>
</html>

的CSS：

var imageArray = ["media/Chicken Itza.jpg", "media/Christ the Redeemer.jpg", "media/Colosseum.jpg", "media/Great Wall of China.jpg", "media/Machu Picchu.jpg", "media/Petra.jpg", "media/TajMahal.jpeg"]
var imageIndex = 0;
var mainImage = document.getElementById('mainImage')
mainImage.src = imageArray[0]

function slideshow() {
    mainImage.innerHTML(imageArray[imageIndex]);
    imageIndex = imageIndex++;
    if (imageIndex > imageArray.length - 1) {
        imageIndex = 0;
    }
    setTimeout(slideshow, 2000); //this line is added
}


function openNav() {
    document.getElementById("hmenu").style.width = "250px";
}

function closeNav() {
    document.getElementById("hmenu").style.width = "0";
}

Answer 1

我已经研究了几个网站，仍然无法获取代码正确，只有html代码中设置的图像显示并且存在图像没有变化......我可以问我做错了什么吗？

只是你根本没有再次调用slideshow方法！

通过方法的结尾添加以下行，每2秒更改一次图像。

setTimeout( slideshow, 2000 ); //this line is added

您还需要设置图片的src属性，而不是innerHTML

mainImage.src = imageArray[imageIndex];

或

mainImage.setAttribute( "src", imageArray[imageIndex] );

<强>即

function slideshow() {
    mainImage.src = imageArray[imageIndex]; //this line is changed as well
    imageIndex = imageIndex++;
    if (imageIndex > imageArray.length - 1) {
        imageIndex = 0;
    }
    setTimeout( slideshow, 2000 ); //this line is added
}

Answer 2

你必须对@ guruvinder372所说的更改进行更改，但仍然需要对修复carousal进行一项重要更改。请看以下声明。

imageIndex = imageIndex++;

当函数调用时，它将始终仅将值imageIndex指定为0。因为上面的语句将首先赋值，然后它会增加。你必须首先增加值，然后你需要像下面这样分配。

imageIndex = ++imageIndex;

DEMO

在上面的演示中，您无法看到图片，但可以使用F12检查图片src是否正在更新。

<强> JS

var imageArray = ["media/Chicken Itza.jpg", "media/Christ the Redeemer.jpg", "media/Colosseum.jpg", "media/Great Wall of China.jpg", "media/Machu Picchu.jpg", "media/Petra.jpg", "media/TajMahal.jpeg"]
var imageIndex = 0; 
var mainImage = document.getElementById('mainImage');
mainImage.src = imageArray[0];

function slideshow() {
   mainImage.src = imageArray[imageIndex]; //this line is changed as well
   imageIndex = ++imageIndex;
   if (imageIndex > imageArray.length - 1) {
       imageIndex = 0;
   }
   setTimeout( slideshow, 2000 ); //this line is added
}

<强> HTML

<body bgcolor="white" onload="slideshow()">
  <img id="mainImage"class="mainslides animate-fading" src="media/Chicken Itza.jpg" width="200" height="200">
</body>

Answer 3

试试这个

function slideshow() {
  setInterval(function (){
    mainImage.src = imageArray[imageIndex];
    imageIndex++;
    if (imageIndex > imageArray.length - 1) {
      imageIndex = 0;
    }
  }, 1000);
}

循环播放图像的幻灯片（html / js）

3 个答案: