向 javascript 图片幻灯片添加详细信息

Question

我们的团队目前正在彻底重新设计我们学校的网站，我们目前正在进行的项目之一是一个轻量级照片幻灯片，您可以找到它 这里。

现在，当用户进入两个缩略图之间的空间时，它们都会消失。组织它们的最佳方式是什么，以便当用户进入拇指的一般区域时它们全部“不褪色”？我想到了一个 div，但我对如何实现它有点模糊。

非常感谢所有帮助。在使用 javascript 进行样式设计方面，我们都不是特别强，所以这对我们来说是一次有趣的学习经历。

非常感谢，

贾斯蒂安·迈耶

Answer 1

在page.html 中，

<div id="wrapper">
  <img class="big" ..../>
  <div id="hover_area" onmouseover="startUnFade();">
    <img class="thumb" ..../>
    <img class="thumb" ..../>
    <img class="thumb" ..../>
  </div>
</div>

您可以设置包装器 div 在页面上的位置。

css

#wrapper {
  height: 420px;
  width: 660px;
  position: relative;
}
#hover_area {
  position: absolute; /* this will position your thumbnails relative to wrapper */
  right: 0;
  bottom: 0;
  padding: 5px; /* space at right and at the bottom */
}
/* and put you images one each other*/
#hover_area img.thumb {
  float: left;
  padding: 5px; /* 10px space between images */
  width: 50px;
  height: 50px;
}

并且您不应该使用内联样式创建 class 属性并将样式放入 css 文件中。