不使用数组
时间: 2023-09-16 20:13:36 浏览: 29
好的,如果不使用数组,你可以使用一个对象来存储所有的图片,每个图片都有一个唯一的键作为标识。然后,你可以使用JavaScript中的Object.keys()方法来获取所有键的列表,使用Math.random()方法来随机选择3个键,最后将它们对应的图片显示在页面上。
以下是实现的具体步骤:
1. 创建一个对象,包含所有的图片路径,每个图片都有一个唯一的键作为标识。
```javascript
var images = {
"image1": "image1.jpg",
"image2": "image2.jpg",
// ...
"image52": "image52.jpg"
};
```
2. 使用Object.keys()方法获取所有键的列表,并使用Math.random()方法选择3个随机键。
```javascript
var keys = Object.keys(images);
var randomKeys = [];
while (randomKeys.length < 3) {
var randomIndex = Math.floor(Math.random() * keys.length);
if (randomKeys.indexOf(keys[randomIndex]) === -1) {
randomKeys.push(keys[randomIndex]);
}
}
```
3. 将选中的3张图片显示在页面上。
```javascript
var imageContainer = document.getElementById("image-container");
for (var i = 0; i < randomKeys.length; i++) {
var img = document.createElement("img");
img.src = images[randomKeys[i]];
imageContainer.appendChild(img);
}
```
4. 为每张图片添加一个按钮,并为按钮添加事件处理程序。
```javascript
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
var img = this.previousElementSibling;
var currentKey = Object.keys(images).find(key => images[key] === img.src);
var currentIndex = keys.indexOf(currentKey);
var nextIndex = (currentIndex + 1) % keys.length;
img.src = images[keys[nextIndex]];
});
}
```
这样,当用户点击任何一个按钮时,对应的图片就会切换到下一张。