Question

我正在尝试为我的投资组合网站制作一个独特的图像切换器。要做到这一点，我想我需要能够拥有一个与相应的列表项数组匹配的图像数组，以及它们所属的项目的名称，如下所示：

<ul>
<li><img src="1.png"></li>
<li><img src="2.png"></li>
<li><img src="3.png"></li>
</ul>

<ul>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>

所以我想我希望javascript像这样“思考”：“哦，img 2是第二个列表项，如果单击项目2，这也是第二个列表项，我应该显示img 2”

Ya digg？

如果您需要视觉效果，这是我到目前为止所拥有的： http://addproxy.net/sites/img_switcher/index.html

Answer 1

在jQuery中，你可以这样做：

HTML：

<ul id="images">
    <li><img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg"></li>
    <li><img src="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg"></li>
    <li><img src="http://photos.smugmug.com/photos/344290837_ypsKL-Ti.jpg"></li>
</ul>

<ul id="projects">
    <li>Project 1</li>
    <li>Project 2</li>
    <li>Project 3</li>
</ul>

的javascript：

$("#projects li").click(function() {
    var pos = $(this).parent().children().index(this);
    var $images = $("#images li");
    $images.hide();  // hide previous images
    $images.eq(pos).show();
});

而且，您可以在此处看到它：http://jsfiddle.net/jfriend00/gV2NH/。

如果你不能使用jQuery，那么一般的想法是你为每个项目设置一个点击处理程序。当单击其中一个时，您将获得父项并获取其子项（这将是所有项目li标记的列表）。然后，您可以看到发生了哪一次点击，现在您有了序列号。然后，您可以使用该序列号从其他列表中显示正确的图像。

如何在同一个<ul>？</ul>中专门制作一组图像

1 个答案: