简单的 Jquery 画廊问题

Question

我是 Jquery 新手，正在尝试构建一个简单的画廊。我知道有很多插件，但我不想使用其中任何一个。我的问题很简单。单击拇指时如何淡入图像。另外我怎样才能实现自动淡入和淡出。我将非常感谢任何回应。谢谢

这是我的代码。

//HTML

<div class="LargeImage">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div class="thumbsImages">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
</div>

// JavaScript

$(document).ready(function() {

    var LargeImages = $(".LargeImages").children();
    var SmallImages = $(".thumbsImages").children();


    SmallImages.each(function() {

        SmallImages.click(function() {

            LargeImages.each(function() {

                // I have problem here with logic           
            });

            $(this).addClass("active");
            $(this).siblings().removeClass("active");

        });
    });
});

Answer 1

您不想在 SmallImages.each(...) 中调用 SmallImages.click(...)，您最终会挂接 每个图像上多次单击 事件。 （click 将处理程序挂接到您调用它的 jQuery 实例内的所有 匹配元素。）

这是一种基本方法，无需额外的 divs:

HTML:

<div class="LargeImage">
</div>
<div class="thumbsImages">
<img class="thumb"
     src='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG'
     data-fullsize='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=123&d=identicon&r=PG'>
<img class="thumb"
     src='http://www.gravatar.com/avatar/92e9e88f33ab596fa1caaf237a4d5fad?s=32&d=identicon&r=PG'
     data-fullsize='http://www.gravatar.com/avatar/92e9e88f33ab596fa1caaf237a4d5fad?s=123&d=identicon&r=PG'>
<img class="thumb"
     src='http://www.gravatar.com/avatar/c3203aa647aeb214c463c59f1af2c38f?s=32&d=identicon&r=PG'
     data-fullsize='http://www.gravatar.com/avatar/c3203aa647aeb214c463c59f1af2c38f?s=128&d=identicon&r=PG'>
</div>
</div>

JavaScript:

jQuery(function($) {

  // Look up the large image once and remember it
  var largeImage = $(".LargeImage");

  // Hook the click event on the thumbnails
  $(".thumbsImages img").click(function() {
    var fullsize, hasImage;

    // Get the full size version from the attribute
    fullsize = $(this).attr("data-fullsize");

    // Flag up whether there's current an image in the large area
    hasImage = largeImage.find('img').length == 0;

    // Fade out whatever's there, then fade in the new image;
    // the `hasImage` check just makes the fadeOut really fast if
    // there's nothing showing.
    largeImage.fadeOut(hasImage ? 0 : 250, function() {
      largeImage.html("<img src='" + fullsize + "'>").fadeIn(250);
    });

  });

});​

Live example

基本上，我在那里做的是存储缩略图的 img 元素中完整尺寸版本的 URL，为 data-fullsize（data- 前缀意味着该属性将在以下条件下验证） HTML5；在 HTML5 之前，没有官方方法可以拥有自己的属性，但浏览器允许它，即使它在技术上是无效的）。然后，当用户单击图像时，我们会淡出大 div 中显示的所有内容，然后将其替换为全尺寸图像并淡入。

Answer 2

您应该做什么的想法：

$(document).ready(function()
{
    $('.thumbsImages').click(function()
    {
    var index = $('.active').prevAll('div').length; //number of previous siblings
    $('.LargeImage').find('div:eq('+index+')').fadeOut(500); //hide the actual showed element

    $('.active').removeClass("active"); //remove the active class
            $(this).addClass("active"); //add class to the actual clicked item

            index = $(this).prevAll('div').length; //number of previous siblings
    $('.LargeImage').find('div:eq('+index+')').fadeIn(500); //show the actual selected image
    });
});

这不是真正优化的代码。但这很容易理解。 ；）

我不知道这是否是您所需要的，但我希望它有帮助！