Question

我正在尝试通过使用图像的外部JSON数组创建幻灯片，并且设法单击“下一步”以显示所有图像，但是我似乎无法弄清楚如何仅制作一个单击该按钮时，一次会出现不同的图像。

我需要以下帮助：

1）如何使下一个按钮一次显示一个图像 2）如何以类似方式显示字幕

This is my HTML: 
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset = "utf-8">

    <link rel="stylesheet" type="text/css" href="slideshow.css">

    <title> JSON SlideShow </title>

    </head>

    <body>

    <header>
    <h1> JSON SlideShow </h1>
    </header>
    <br>
    <button id="nextbtn"> Next </button>

    <div id="slideshow"></div>
    <div id="caption"></div>

    <script src="slideshow.js"></script>

    </body>
    </html>

This is my Java Script:

    var prevbtn = document.getElementById("prevbtn");
    var nextbtn = document.getElementById("nextbtn");
    var slideContainer = document.getElementById("slideshow");
    nextbtn.addEventListener("click", function() {
    var JSONarray = new XMLHttpRequest();
    JSONarray.open('GET', 'http://localhost/slide.json');
    JSONarray.onload = function () {
    var mySlides = JSON.parse(JSONarray.responseText);
    createHTML(mySlides);
    };
    JSONarray.send();   
    });

    function createHTML(slide) {
    var i;
    var image = "";

    for (i = 0; i < slide.length; i++) {
    image += '<img src=" '+ slide[i].image_name + '"></img>';
    }
    slideContainer.insertAdjacentHTML('beforeend', image);

    }; 


This is my CSS


    /* Slideshow container */
    .slideshowcontainer {
    max-width: 1000px;
    position: relative;
    margin: auto; 
    }

    /* Hide the images by default */
    #slideshow {
    display: none;
    }

如何一次从外部JSON文件显示一张图像-创建幻灯片

0 个答案: