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.click(...)内拨打SmallImages.each(...)，您最终会多次在每张图片上挂起click个事件。（click将处理程序挂钩到您调用它的jQuery实例中的所有匹配元素。）

这是在没有额外div的情况下做你正在做的事情的基本方法：

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
    });
});

这不是一个真正优化的代码。但它很容易理解。 ;）

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

简单的Jquery图库问题

2 个答案: