jquery - 自定义 jquery 画廊

Question

我正在创建一个模板。除了 jquery 图像库之外，所有 xhtml/css 工作都已完成。周围有太多jquery库，我不知道如何根据情况定制它们

这是一个三列模板。第一列有导航。第二列将从第三列的缩略图中选择图像。第三列中还有用于旋转缩略图的向上/向下按钮。单击缩略图应加载到第二列的图像 div 中。

我需要提供更多信息吗？

Answer 1

由于您实际上没有提出问题，所以我假设您是在问如何开始。您还没有给出 HTML 结构，所以我也必须假设这一点。

HTML 结构

<div id="gallery">
    <img id="main_image" />
    <div>
        <img src="image1-thumbnail.jpg" />
        <img src="image2-thumbnail.jpg" />
        <img src="image3-thumbnail.jpg" />
        <img src="image4-thumbnail.jpg" />
    </div>
</div>

首先创建一个 jQuery 插件:

(function ($) {
    $.fn.gallery = function () {

    };
})(jQuery)

这可以确保您的代码完全可重用，并且如果您将来想将其与其他框架一起使用，也不会导致命名冲突。接下来你要为每个缩略图添加一个点击事件，以使其修改主图像的SRC:

(function ($) {
    $.fn.gallery = function () {
        this.find($(this).attr('id') + '>div>img').click(function () {
            $(this).siblings('img').removeClass('selected');
            $(this).addClass('selected');
            var mainImageSrc = $(this).attr('src').replace('-thumbnail','');
            $(this).parent().siblings('img').attr('src',mainImageSrc);
        });
        return this; // jQuery plugins should (nearly) always return this to make them chainable
    };
})(jQuery);

最后调用你的函数:

jQuery(function ($) {
    $('#gallery').gallery();
});

此代码应提供基本功能。我会让你致力于使缩略图可滚动，如果你真的愿意的话，可以在图像之间进行淡入淡出(提示:你需要两个 img 标签，使用 CSS 将它们放在彼此之上，然后 .animate() 它们之间淡出的不透明度)。希望这能让你继续前进。