我一直在尝试通过一个数组创建一个随机出现和消失的图像网格，用于一个类，艺术项目。在谷歌浏览器中，我已经能够加载图像图标，所以我相信代码工作，除了图像加载。这些图像可以加载，但它们不会专门在Javascript中。有没有什么万无一失的方法来链接它们并让它们出现在网站上？
我尝试过更改“const images = www.example.com“中的链接imageSources.map，我也尝试过更改HTML头部中的链接，但没有用。有没有更直接的方法来包含我的链接？下面是我的HTML：
<!DOCTYPE html>
<html>
<head>
<title>Website For 1</title>
<link rel="stylesheet" href="website-for-one.css">
<link rel="shortcut icon" type="image/x-icon" href="Website_for_One/Images/image1.jpg">
<link rel="shortcut icon" type="image/x-icon" href="Website_for_One/Images/image2.jpg">
<link rel="shortcut icon" type="image/x-icon" href="Website_for_One/Images/image3.jpg">
<link rel="shortcut icon" type="image/x-icon" href="Website_for_One/Images/image4.jpg">
<link rel="shortcut icon" type="image/x-icon" href="Website_for_One/Images/image5.jpg">
<link rel="shortcut icon" type="image/x-icon" href="Website_for_One/Images/image6.jpg">
</head>
<body>
<div id="image-container"></div>
<div id="container">
<p id="three">Three Words Against The World</p>
<p id="title">A Website For One</p>
</div>
<br><br>
<br><br>
<br><br>
<div id="message-container">
<span id="message"></span>
</div>
<div id="image-load">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
<img src="image6.jpg">
<img src="image7.jpg">
<img src="image8.jpg">
<img src="image9.jpg">
<img src="image10.jpg">
</div>
<script src="web_for_one.js"></script>
<script type="text/javascript">
const imageSources = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg',
'image6.jpg',
'image7.jpg',
'image8.jpg',
'image9.jpg',
'image10.jpg',
];
const images = imageSources.map(source => 'Website_for_One/Images/' + source);
const container = document.getElementById('image-container');
for (let i = 0; i < images.length; i++) {
const img = document.createElement('img');
img.src = images[i];
img.style.position = 'absolute';
img.style.top = Math.random() * window.innerHeight + 'px';
img.style.left = Math.random() * window.innerWidth + 'px';
container.appendChild(img);
}
setInterval(() => {
const imgs = container.getElementsByTagName('img');
for (let i = 0; i < imgs.length; i++) {
imgs[i].style.top = Math.random() * window.innerHeight + 'px';
imgs[i].style.left = Math.random() * window.innerWidth + 'px';
}
}, 5000);
setInterval(() => {
const imgs = container.getElementsByTagName('img');
for (let i = 0; i < imgs.length; i++) {
imgs[i].src = images[Math.floor(Math.random() * images.length)];
}
}, 10000);
</script>
</body>
</html>下面是我的CSS：
#container{
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
border: 1px solid red;
padding: 20px;
}
#image-load{
opacity: 0%;
display: none;
}
#three{
font-size: .7vw;
grid-column: 1 / 6;
grid-row: 1;
}
#title{
font-size: .7vw;
grid-column: 3 / 6;
grid-row: 1;
}
#words{
font-size: .7vw;
grid-column: 1 / 6;
grid-row: 4;
}
#message-container{
border: 1px solid red;
}
#message{
opacity: 0;
transition: opacity 0.2s ease-in-out;
padding: 20px;
font-size: .7vw;
}
#imagegrid {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
pointer-events: none;
}
#imagegrid img {
position: absolute;
top: 0;
left: 0;
width: 10vw;
height: 10vw;
pointer-events: auto;
cursor: move;
}以下是我的JS：
const messages = ["I Love You", "Nothing to prove", "Nothing to hide", "Nothing to lose", "okay, pure", "a dream is more powerful", "Mom says hello", "How are you?", "I miss you", "Listen", "You're beautiful", "Four words against the world: I love you _____"]; // Define an array of messages
const fonts = ["Arial, sans-serif", "Helvetica, sans-serif", "Verdana, sans-serif"]; // Define an array of fonts
const messageContainer = document.getElementById("message-container"); // Get the message container element
const messageElement = document.getElementById("message"); // Get the message element
let messageIndex = 0; // Set the initial message index
function displayNextMessage() {
messageIndex = (messageIndex + 1) % messages.length; // Increment the message index and wrap around to 0 when it reaches the end
messageElement.textContent = messages[messageIndex]; // Set the message text to the next message
messageElement.style.opacity = 1; // Set the message opacity to 1 to fade it in
messageElement.style.fontFamily = fonts[Math.floor(Math.random() * fonts.length)]; // Set the font family to a random font from the fonts array
setTimeout(hideMessage, 2000); // Call the hideMessage function after 2 seconds
}
function hideMessage() {
messageElement.style.opacity = 0; // Set the message opacity to 0 to fade it out
setTimeout(displayNextMessage, 500); // Call the displayNextMessage function after 0.5 seconds to show the next message
}
displayNextMessage(); // Call the displayNextMessage function to start the animation
1条答案
按热度按时间8ftvxx2r1#
希望你一切都好。
当你尝试添加
image1.jpg作为img标签的src时，问题就出现了。绝对路径在这种情况下不起作用。你应该考虑将图像的完整路径（例如https://yourwebsite.com/Images/image1.jpg）添加到src属性中。如何做到这一点，取决于你的用例。但我相信你可以像这样添加它们，例如：或者如果你更喜欢一种更通用的方法：