我想知道如何从用户提供的链接循环图像集。我已经有了一些代码,当用户在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>
我希望图片循环播放,我也希望用户能够更改网址。