带有上一个/下一个功能和缩略图的 Javascript 画廊......没有别的

Question

缺少像 Galleriffic 这样的东西

以及修改、隐藏和删除元素，添加可以单击缩略图以显示图像的功能的方法是什么？

非常感谢任何能为我指明正确方向的人。我在 mcfedries.com 上使用 Paul McFedries 的以下内容。

<script type="text/javascript">
<!--
// Use the following variable to specify 
// the number of images
var NumberOfImages = 3

var img = new Array(NumberOfImages)

// Use the following variables to specify the image names:
img[0] = "yellow1.jpg"
img[1] = "blue2.jpg"
img[2] = "green3.jpg"


var imgNumber = 0

function NextImage()
{
    imgNumber++
    if (imgNumber == NumberOfImages)
        imgNumber = 0
    document.images["VCRImage"].src = img[imgNumber]
}

function PreviousImage()
{
    imgNumber--
    if (imgNumber < 0)
        imgNumber = NumberOfImages - 1
    document.images["VCRImage"].src = img[imgNumber]
}

</script>

在 html 中:

    <div class="galleryarrows">
<A HREF="javascript:PreviousImage()">
<IMG SRC="previous.png" BORDER=0></A>
<A HREF="javascript:NextImage()">
<IMG SRC="next.png" BORDER=0></A>
</div>

Answer 1

一个快速、基本的解决方案:将图像的完整尺寸版本保存在名为“full_images”的文件夹中，名称与缩略图相同。

在 html 中显示缩略图的 img 元素中添加一个 onClick 事件，因此它们看起来像这样。

<img src = "yellow1.jpg" name = "thumb[0]" style = "cursor:pointer" onClick = "Javascript:DisplayImage(0);" alt = "yellow"/>
<img src = "blue2.jpg" name = "thumb[1]" style = "cursor:pointer" onClick = "Javascript:DisplayImage(1);"  alt = "blue"/>
<img src = "green3.jpg" name = "thumb[2]" style = "cursor:pointer" onClick = "Javascript:DisplayImage(2);"  alt = "green"/>

在你的javascript中，添加这个函数

function DisplayImage(id){
       imgNumber = id;
       document.images["VCRImage"].src = "full_images/" + img[id];

这将显示在名为“VCRImage”的元素中。

这不是我最喜欢的解决方案，但速度很快，而且应该可行。如果 Javascript 对你来说是新手，那么你不妨看看 jQuery .它更易于使用，并且更加跨浏览器兼容。