Question

的内容

并修改，隐藏和删除元素，添加一个函数的方法是什么，通过该函数还可以单击缩略图来显示图像？

任何能指出我正确方向的人都有责任。我在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

快速，基本的解决方案：将图片的完整尺寸版本保存在名为say，'full_images'的文件夹中，其名称与缩略图相同。

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

<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。它使用起来更容易，并且更兼容跨浏览器。

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

1 个答案: