如何从链接上循环javascript图像?

时间:2016-08-02 20:25:34

标签: javascript html image loops

我想知道如何从用户提供的链接循环图像集。我已经有了一些代码,当用户在picture1,picture2或picture3框中插入一个Url时,它会在整个页面上随机显示这些图片并永远地一直向下。我希望"尝试它"按钮在延迟一段时间后在页面上的相同位置刷新图像。我还想为用户添加另一个框,为他们输入的每个图像添加标题。

以下是代码:

<html>
<head>
    <script type="text/javascript">
        function myFunction() {
        var x = document.getElementById("myText").value;
        document.getElementById("demo").innerHTML = x;

        var y = document.getElementById("yourText").value;
        document.getElementById("demo").innerHTML = y;

        var z = document.getElementById("hisText").value;
        document.getElementById("demo").innerHTML = z;

        var total_images = 3;
        var random_number = Math.floor((Math.random()*total_images));
        var random_img = new Array();
        random_img[0] = document.createElement("IMG");
        random_img[0].setAttribute("src", x);
        random_img[0].setAttribute("width", "304");
        random_img[0].setAttribute("width", "228");
        random_img[0].setAttribute("alt", "The Pulpit Rock ");

        random_img[1] = document.createElement("IMG");
        random_img[1].setAttribute("src", y);
        random_img[1].setAttribute("width", "304");
        random_img[1].setAttribute("width", "228");
        random_img[1].setAttribute("alt", "The Solid Rock ");

        random_img[2] = document.createElement("IMG");
        random_img[2].setAttribute("src", z);
        random_img[2].setAttribute("width", "304");
        random_img[2].setAttribute("width", "228");
        random_img[2].setAttribute("alt", "The Heavy Rock ");

        document.body.appendChild(random_img[random_number]);
        }
    </script>
</head>
<body>
    <input type="text" id="myText" value="Picture1 link...">
    <input type="text" id="yourText" value="Picture2 link...">
    <input type="text" id="hisText" value="Picture 3 link...">

    <p>Click the "Try it" button to get the text in the text field.</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>
</body>
</html>

我希望图片循环播放,我也希望用户能够更改网址。

0 个答案:

没有答案