Javascript 幻灯片画廊

我正在使用Highslide显示我的照片。我想介绍一个简单的图库-如果有人点击照片“dolno.jpg”，它将显示带有3张照片的图库。现在只有一个（1.jpg）。我有3张照片： 1.jpg，2.jpg，3.jpg 我该怎么做？这是我的代码：

<script type="text/javascript" src="/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript">
    // override Highslide settings here
    // instead of editing the highslide.js file
    hs.graphicsDir = '/highslide/graphics/';
</script>

<td>
<a class="highslide" href="1.jpg" onclick="return hs.expand(this, { captionText: '<b>THIS</b>' } )">
<img src="/logafirm/dolno.jpg" id="imgg" title="Click to enlarge" height="80" weight="80"></a>
 <font color="#52180"><b>THIS</font></b></A>
</td>

//在此处覆盖幻灯片设置
//而不是编辑highslide.js文件
hs.graphicsDir='/highslide/graphics/'；
这

只需为要显示的其他图像复制锚元素

像这样

<a class="highslide" href="1.jpg" onclick="return hs.expand(this, { captionText:    '<b>THIS</b>' } )">
  <img src="/logafirm/dolno.jpg" id="imgg" title="Click to enlarge" height="80" weight="80">
</a>
<a class="highslide" href="2.jpg" onclick="return hs.expand(this, { captionText: '<b>THE OTHER IMAGE</b>' } )">
  <img src="/logafirm/THE_OTHER_IMAGE.jpg" id="imgg" title="Click to enlarge" height="80" weight="80">
</a>

此外，您还需要指定幻灯片放映设置

根据文件：

<script type="text/javascript">
hs.addSlideshow({
// slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: true,
overlayOptions: {
    opacity: .6,
    position: 'top center',
    hideOnMouseOut: true
}
});

// Optional: a crossfade transition looks good with the slideshow
hs.transitions = ['expand', 'crossfade'];
</script>

hs.addSlideshow({
//幻灯片组：“组1”，
间隔时间：5000，
重复：错，
对,，
fixedControls：对，
覆盖选项：{
不透明度：.6，
位置：'上止点'，
藏身处：对
}
});
//可选：交叉淡入淡出过渡在幻灯片放映中看起来不错
hs.transitions=['expand'，'crossfade']；

---

最后，如果您只想显示第一个缩略图，只需隐藏其他缩略图。使用CSS，或者更好地使用javascript（没有js的用户将看到图像）

Highslide有一个内置的机制来做您想做的事情-无需摆弄CSS或javascript来隐藏其他两个缩略图