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

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

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 
 
     
 
    }

<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>

来源

2016-08-15 jolex41

你可以做这样的事情....但那不是真的一个很好的选择，以建立一个滑块......更有意义，用户CSS3等...但它不是那么容易

function loadRandomImage() { 
 
    \t var randomImages = []; 
 
    \t var myTextImage = document.getElementById("myText").value; 
 
    \t var yourTextImage = document.getElementById("yourText").value; 
 
    \t var hisTextImage = document.getElementById("hisText").value; 
 
    \t var random_number; 
 
    \t randomImages.push(createImage(myTextImage, "The Pulpit Rock")); 
 
    \t randomImages.push(createImage(yourTextImage, "The Solid Rock")); 
 
    \t 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) { 
 
\t var newImage = document.createElement("IMG"); 
 
\t newImage.setAttribute("src", src); 
 
\t 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>

来源

2016-08-15 14:33:43

非常感谢。我正在做这个测试，我只想使用html和JavaScript。大多数其他教程将包括其他语言，但你是一个非常好的帮助。 – jolex41

如果有帮助，请选择我的答案 –

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

回答

相关问题