1

我正在制作一个带有缩略图的简单 jQuery 图像库。

我想要的部分功能是，如果您单击当前显示的主画廊幻灯片，.show它会删除类show，淡出然后在下一张幻灯片中淡入并添加一个类show。相关缩略图也将类别从非活动更改为活动，反之亦然。

我为此使用的 jQuery 是：

$( document ).ready(function() {

    $('.gallery-images .show').click(function() {
        $('.gallery-images .show').removeClass('show').fadeOut(300, function() {
            $(this).next().fadeIn(500).addClass('show');
        });
        $('.gallery .active').removeClass('active').addClass('inactive').next().removeClass('inactive').addClass('active');
    });

});

和 HTML：

<div id="gallery-71" class="content gallery gallery-71">
    <div id="gallery-images-wrapper">
        <div class="gallery-images">
                    <div class='gallery-image show' id='gallery-image-72'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>1st caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-73' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>2nd caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-74' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>3rd caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-75' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>4th caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-76' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>5th caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-77' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>6th caption</div>
                    </div>
        </div><!--.gallery-images-->
    </div><!--#gallery-images-wrapper-->
    <div id="gallery-thumbs-wrapper">
        <ul class="gallery-thumbs noscript">
            <li class='gallery-thumb active' id='gallery-thumb-72'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-73'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-74'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-75'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-76'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-77'><img src="http://placekitten.com/g/50/50" /></li>
        </ul><!--.gallery-thumbs-->
    </div><!--#gallery-thumbs-wrapper-->
</div><!--gallery-->

目前，这仅在您第一次单击主图像时有效，但在那之后，当我单击第二张幻灯片时，它似乎没有注册任何内容。

任何帮助将不胜感激，谢谢。

在这里演示：http: //jsfiddle.net/fFunx/1/

4

1 回答 1

3

尝试这个

$( document ).ready(function() {

        $('.gallery-images .gallery-image').on('click',function() {
               if ($(this).hasClass('show')) {
                 $(this).removeClass('show').hide(); 
                 $(this).next().addClass('show').show();
                 $('.gallery .active').removeClass('active').addClass('inactive').next().removeClass('inactive').addClass('active');
               }
        });
    });

我真的不知道为什么你的不起作用。我对此很好奇。为了使淡入和淡出看起来更好，您需要使用绝对定位，这样图像就不会出现“跳跃”。

于 2013-09-16T20:23:13.123 回答