html中的条件图像库

Conditional image galleries in html

本文关键字：图像 条件 html      更新时间：2023-09-26

我想做一个有3个选项的框(2013,2005,2004)，它们都超链接到它们自己独立的jquery滑块图像库。我希望当你点击2013时，会出现2013的图库当你点击2005时，会出现2005的图库。

我不知道我是否应该使用'点击事件监听器'或只是使用html。我是新的编码，并将感谢尽可能多的帮助。谢谢。

示例:jsFiddle

如果你正在使用第三部分插件来提供画廊功能，你可以这样解决你的问题:

创建第二个容器盒，并将3个不同的画廊放入容器中，但是隐藏。

的例子:

<div class="select-gallery">
 <ul>
  <li data="gallery1">2013</li> <!-- the data attribute links the list element to it's related gallery -->
  <li data="gallery2">2005</li>
  <li data="gallery3">2004</li>
 </ul>
</div>
<div class="gallery-container">
 <ul id="gallery1" class="is-hidden gallery">[...]</ul>
 <ul id="gallery2" class="is-hidden gallery">[...]</ul>
 <ul id="gallery3" class="is-hidden gallery">[...]</ul>
</div>

然后用javascript，(我假设你要使用jquery来加速)在jQuery框架中，你可以给select-gallery列表元素的click事件附加一个事件处理程序来显示你的任何画廊，如下所示:

$(document).ready(function () {
    $(".select-gallery").on("click", "li", function () {
        var $data = $(this).attr("data");
        $(".gallery").css("display", "none");
        $("#" + $data).fadeIn();
    });
});
相关文章：