简单产品库的 CSS/JS 切换缩略图不透明度答案

【问题标题】：CSS/JS switch thumbnail opacity for simple product gallery简单产品库的 CSS/JS 切换缩略图不透明度
【发布时间】：2016-02-15 08:33:58
【问题描述】：

我正在构建一个非常简单的产品图库，只有 2 个缩略图和 1 个放大显示/产品的正面。我有图像开关工作和缩略图上的不透明度，悬停时，请参阅代码笔： http://codepen.io/anon/pen/NGeBWB（由于某种原因，code-pen 不切换图像，它在本地工作正常，但它仍然说明了问题）。

.button:hover {  opacity:0.8  }

function switchImg(i) {
   document.images["wine"].src = i;
}

我想要的只是交换不透明度的缩略图，因此当单击缩略图时，它会获得不透明度以指示其随附的大图像正在显示，反之亦然，如果有人想放置一些 CSS 缓入效果/淡入淡出等等，那也会有所帮助。

【问题讨论】：

document.images["wine"].src = 'http://bonrouge.com/' + i 您必须包含完整路径。
代码笔效果好一点，但不能解决主要问题。

标签： javascript html css image thumbnails

【解决方案1】：

检查您的控制台输出（无法加载资源）。您遇到 406 数据错误 - 服务器不允许访问该文件。检查服务器上图片的文件权限（至少应为 644），并且您已将 MOD 权限设置为允许远程图片请求。

【讨论】：

【解决方案2】：

请在下面找到更改。问题是：

您需要在调用函数时提及完整的图像路径。
最好使用document.getElementById，同时专门指向一个dom元素。

function switchImg(i) {
  document.getElementById("imageSRC").src = i;
}

.button:hover {
  opacity: 0.8
}

<img id="imageSRC" src="http://bonrouge.com/wine.jpg" id="wine" height="500" width="300" alt="">

<a href="#" onClick="switchImg('http://bonrouge.com/wine.jpg')" class="button">
  <img src="http://bonrouge.com/wine.jpg" height="100" width="100" alt=""></a>

<a href="#" onClick="switchImg('http://bonrouge.com/beer.jpg')" class="button">
  <img src="http://bonrouge.com/beer.jpg" height="100" width="100" alt=""></a>

代码笔：http://codepen.io/kishoresahas/pen/epbjRm

【讨论】：