0

我有一个 javascript 数组，可以在选择其名称（瀑布、日落、白树）时更改图像。它现在是下拉菜单的形式，但我想知道是否可以将其更改为常规的无序列表。我不想使用 jquery。

如果无法将数组更改为无序列表，是否有其他方法可以根据用户交互（onclick）更改 div 中的内容？即图像下方的三个不同链接。单击链接后，会将不同的图像加载到 div 中。这必须通过一个功能来完成。

HTML

    <body>

    <img src="images/photo1.jpg" name="sunset">

    <ul> 
<select onClick=imageSwap(this) name=cached>
    <option value=image1>Sunset</option>
    <option value=image2>Waterfall</option>
    <option value=image3>White Tree</option>
</select>
    </ul>

    </body>

JAVASCRIPT

    if(document.images) {
    imageSwap = new Array();

    image1 = new Image()
    image1.src = "images/photo1.jpg"
    image2 = new Image()
    image2.src = "images/photo2.jpg"
    image3 = new Image()
    image3.src = "images/photo3.jpg"

    function imageSwap(list) {

    var img = list.options[list.selectedIndex].value; 

    document.sunset.src = eval(img + ".src");
    }
    }
4

1 回答 1

0

您可以创建如下链接：

<a href="#" onclick="changeImg('image1.jpg')">Image 1</a>
<a href="#" onclick="changeImg('image2.jpg')">Image 2</a>

和一个功能：

function changeImg(src) {
  document.getElementById("imgId").src = src;
}

其中imgId是您的<img>元素的 id。

这是一个例子：

http://jsfiddle.net/6WS2K/4/

于 2013-02-04T20:00:43.670 回答