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

Question

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

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

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

非常感谢，

贾斯蒂安·迈耶

Answer 1

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 文件中。