Question

我正在制作幻灯片，用户可以在其中输入自己的网址，并将该图片更改为用户网址。当用户按下开始按钮时，图像将循环。我想修改下面的代码，以便一次只有一个图像（新图像替换旧图像在同一位置，而不是添加更多）。我还想为图像添加一个标题。

＆＃13;

   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]);
    document.getElementById("demo").innerHTML = ++c
       
   }

＆＃13;

<html>
 <head>
    <script src ="slideshow">
   </script>
 </head>
 <body>


  <input type="text" id="myText" value="https://bower.io/img/bower-logo.png">
  <input type="text" id="yourText" value="https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png">
  <input type="text" id="hisText" value="http://media.vectormagic.com/tutorials/revectorize/soldier.png">

  <p>Click the "Try it" button to get the text in the text field.</p>

  <button onClick="myTimer = setInterval(myFunction, 1000)">Start Slideshow!</button>
  
  <p id="demo">Click on the button above and I will count forever.</p>

  <button onClick="clearInterval(myTimer)">Stop Slideshow!</button>


  <p id="demo"></p>

 </body>
</html>

＆＃13;

Answer 1

你可以做类似这样的事情....但这不是构建滑块的好选择...对用户CSS3等更有意义......但它并不那么容易

function loadRandomImage() {
    	var randomImages = [];
    	var myTextImage = document.getElementById("myText").value;
    	var yourTextImage = document.getElementById("yourText").value;
    	var hisTextImage = document.getElementById("hisText").value;
    	var random_number;
    	randomImages.push(createImage(myTextImage, "The Pulpit Rock"));
    	randomImages.push(createImage(yourTextImage, "The Solid Rock"));
    	randomImages.push(createImage(hisTextImage, "The Heavy Rock"));
        random_number = Math.floor((Math.random()) * randomImages.length); //take the array length
        document.getElementById("slider").innerHTML = randomImages[random_number].outerHTML;
}

function createImage(src, altTag) {
	var newImage = document.createElement("IMG");
	newImage.setAttribute("src", src);
	newImage.setAttribute("width", "304");
    newImage.setAttribute("width", "228"); //Overwrites the first width attribute
    newImage.setAttribute("alt", altTag);
    return newImage;
}

<input type="text" id="myText" value="https://bower.io/img/bower-logo.png">
<input type="text" id="yourText" value="https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png">
<input type="text" id="hisText" value="http://media.vectormagic.com/tutorials/revectorize/soldier.png">

<p>Click the "Try it" button to get the text in the text field.</p>

<button onClick="myTimer = setInterval(loadRandomImage, 1000)">Start Slideshow!</button>

<p id="demo">Click on the button above and I will count forever.</p>

<button onClick="clearInterval(myTimer)">Stop Slideshow!</button>


<p id="slider"></p>

创建幻灯片，用户可以在Javascript中输入自己的URL

1 个答案: