javascript - 更改多个图像源 Javascript

标签 javascript image set gallery

我正在创建一个简单的图片库,我想创建多组图片。单击链接时,链接给定集中的所有图像都会更改。

这是我当前的代码:

<ul>
  <li><img src="image01.jpg" width="500" height="450"></li>
  <li><img src="image02.jpg" width="200" height="450"></li>
  <li><img src="image03.jpg" width="530" height="450"></li>
  <li><img src="image04.jpg" width="500" height="450"></li>
  <li><img src="image05.jpg" width="178" height="340"></li>
  <li><img src="image06.jpg" width="400" height="450"></li>
  <li><img src="image07.jpg" width="300" height="220"></li>
  <li><img src="image08.jpg" width="400" height="450"></li>
  <li><img src="image09.jpg" width="500" height="450"></li>
  <li><img src="image10.jpg" width="400" height="450"></li>
  <li><img src="image11.jpg" width="300" height="450"></li>
  <li><img src="image12.jpg" width="300" height="450"></li>
  <li><img src="image13.jpg" width="178" height="340"></li>
  <li><img src="image14.jpg" width="500" height="450"></li>
  <li><img src="image15.jpg" width="200" height="220"></li>
  <li><img src="image16.jpg" width="100" height="450"></li>
</ul>

例如,点击 link1 时,源将全部更改为 setA01.jpg、setA02.jpg,而单击 link2 时,源将变为 setB01.jpg,依此类推。任何帮助将不胜感激。

最佳答案

如果您的号码总是“01、02、03 等”,您可以使用如下函数:

function setBase(baseval) {
  var images = document.getElementById("mylist").getElementsByTagName("img");
  for (var i = 0; i < images.length; i++) {
    images[i].src = baseval + ((i<9)?0+i:i) + ".jpg"; 
  }
}

针对此列表使用它:

<a href="#" onclick="setBase('setA'); return false;">Set A</a>
<ul id="mylist">
  <li><img src="image01.jpg" /></li>
  <li><img src="image02.jpg" /></li>
</ul>

将创建以下内容(假设“setA”作为参数传入):

<ul id="mylist">
  <li><img src="setA01.jpg" /></li>
  <li><img src="setA02.jpg" /></li>
</ul>

关于javascript - 更改多个图像源 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2164292/

相关文章:

javascript - 函数运行函数

javascript - 将数字转换为对应的字母

javascript - 获取 API 请求的输出(客户端)

java - 如何使用颜色图案剪切图像?

javascript - Raphael.js 点击事件

javascript - 在 Javascript 中移动字符串

c# - 在 C# 中将 PDF 导出为 JPG

java - 从sqlite数据库java中检索图像

java - 使用 keySet() 方法然后将 Set 更改为字符串数组? java

c# - 如何判断枚举属性是否已设置? C#