当前位置：文江博客话题详情

Javascript/JQuery：具有非常大图像的画廊。如何让它单击淡出，加载下一张图像，然后淡入新图像？

发布于 2024-08-10 17:47:30 字数 233 浏览 3 评论 0原文

我的老板让我在一个网站上工作，该网站的中间基本上有一个非常大的画廊。这一部分需要工作的方式是，用户单击下一个/上一个按钮，图像淡出，显示加载旋转图像 gif，然后在下载时淡入新图像。我不知道从哪里开始。

我对 jquery 有所了解，但我对实际的 javascript 很陌生。我手头唯一的参考书是 1997 年的《Javascript for Dummies》。这对我有任何用处吗？或者从那时起 Javascript 发生了变化吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

听风念你 2024-08-17 17:47:30

有很多用于图片库的 jQuery 插件：Galleria、GalleryView、Pikachoose 和 < a href="http://www.mudaimemo.com/p/gallery/" rel="nofollow noreferrer">这个。

或者您可以从 jQuery 插件页面进行搜索。

回复收藏 0 原文

御弟哥哥 2024-08-17 17:47:30

请获取一本较新的书，或者只是使用网络作为资源，任何信息。从 1997 年开始就已经过时了。

这是一个非常简单的网站，我之前向初学者推荐过： http://htmldog.com/guides/javascript/
不，它并没有涵盖所有内容，但这就是它的好处，你会得到一些关键的东西，然后能够在谷歌上搜索更具体的东西。

首先给你一些准系统，我会做这样的事情：

$(document).ready(function() {
    $('#nextBtn').click(function() {
        transitionToNextImage ();
    });
});
transitionToNextImage = function() {
    $('img.active-image').fadeTo(1000,0), function() {
        // fade out complete.
        $('#inProgressGif').show();
        getNextImage();
    });
};
getNextImage = function() {
    // make ajax call to get new image, and
    // in the success callback of the ajax call, 
    // remove the inProgressGif, and
    // add the image ot the DOM with opacity 0,
    // then slowly fade it in to opacity 1 (opposite
    // of what was done above
};

Please get a newer book, or just use the web as a resource, any info. from 1997 is going to be horribly outdated.

This is a very simple site I've recommended to beginners before: http://htmldog.com/guides/javascript/
No, it doesn't cover everything, but that's what's good about it, you'll get some key things down, and then be able to search on google for more specific stuff.

To give you some barebones ot start with, I would do something like this:

$(document).ready(function() {
    $('#nextBtn').click(function() {
        transitionToNextImage ();
    });
});
transitionToNextImage = function() {
    $('img.active-image').fadeTo(1000,0), function() {
        // fade out complete.
        $('#inProgressGif').show();
        getNextImage();
    });
};
getNextImage = function() {
    // make ajax call to get new image, and
    // in the success callback of the ajax call, 
    // remove the inProgressGif, and
    // add the image ot the DOM with opacity 0,
    // then slowly fade it in to opacity 1 (opposite
    // of what was done above
};

回复收藏 0 原文

~没有更多了~