jQuery翻转混乱

Question

试图让我的翻转更改 src 翻转。这工作正常，虽然有一个错误。单击缩略图后，src 有时可能包含错误的 src（即使鼠标悬停，鼠标悬停状态仍然存在）。 .要查找错误，请单击一些缩略图并将鼠标悬停在一些缩略图上，您应该会看到已单击的鼠标悬停 src 仍然存在。演示不再可用，抱歉！

jQuery -

function image_gallery (){

if ($('ul.thumbs').length > 0) {
    $('.gallery').each(function(){
        $('ul.thumbs li img:gt(0)').addClass('unselected');
        $('ul.thumbs li img:eq(0)').addClass('selected');

        function mouse_overs () {
            var unselected = $('li img.unselected');
            unselected.hover(function(){
                    var thumb = $(this);
                    thumb.attr('src',thumb.attr('src')
                           .replace(/([^.]*\d)\.(.*)/, "$1r.$2"));
                }, function(){
                      var thumb = $(this);
                  thumb.each(function(){
                      $(this).attr('src',$(this)
                           .attr('src').replace('r.jpg','.jpg'));
                  });
            });
        };
        mouse_overs();
        var img_main = $(this).find('img.main:first');
        $(this).find('ul.thumbs img').each(function(){
            $(this).click(function(){
                var thumb =  $(this);
                var src = thumb.attr('src');
                if ( src.indexOf('r.jpg') == -1) {
                     $(this).attr('src',thumb.attr('src')
                                .replace(/([^.]*)\.(.*)/, "$1r.$2"));
                }
                var selected = $('ul.thumbs li img.selected');

                // previous img remove r.jpg
                selected.attr('src',selected.attr('src')
                                    .replace('r.jpg','.jpg'));
                  selected.removeClass('selected');
                selected.addClass('unselected');

                //current thumb add class "selected", remove "unselected"
                thumb.addClass('selected');
                thumb.removeClass('unselected');
                mouse_overs();
                var rel = $(this).parent('a').attr('rel');
                img_main.fadeOut(500, function(){
                    img_main.attr('src', rel);
                    img_main.fadeIn('slow');
                });

                thumb.mouseout(function(){
                    var src = $(this).attr('src');
                    if ( src.indexOf('r.jpg') == -1) {
                        $(this).attr('src',thumb.attr('src')
                                      .replace(/([^.]*)\.(.*)/, "$1r.$2"));
                    }
                    else return false;
                });
            });
});
    });
   }
}

HTML：

<div class="gallery">
<img class="main" src="images/gallery/yes-campaign/NL1.jpg"/>
<ul class="thumbs">
        <li><a rel="images/gallery/yes-campaign/NL1.jpg"><img src="images/thumbs/yes-campaign/NL-1r.jpg"/></a></li>
        <li><a rel="images/gallery/yes-campaign/NL2.jpg"><img src="images/thumbs/yes-campaign/NL-2.jpg"/></a></li>
        <li><a rel="images/gallery/yes-campaign/NL3.jpg"><img src="images/thumbs/yes-campaign/NL-3.jpg"/></a></li>
        <li><a rel="images/gallery/yes-campaign/NL4.jpg"><img src="images/thumbs/yes-campaign/NL-4.jpg"/></a></li>
    </ul>
</div>

此 HTML 在整个页面中重复多次。翻转状态为 NL1r.jpg、NL2r.jpg 等。图像被组织在文件夹中，因此所有图像文件名使用相同的命名约定。

Answer 1

我可以建议以下代码而不是您的代码吗？

$(function gallery (){

        var transparency = .5;
        var selectedClassName = 'selected';
        var imageFadeSpeed = 'fast';

        $('.gallery').each(function(i, gallery) {
            var $gallery = $(gallery);

            var $main = $gallery.find('.main');

            $gallery.find('.thumbs a')

                // image preloader
                .each(function(){
                    var tempImg = $('<img src="'+ $(this).attr('rel') +'" width="'+ $main.width() +'" />').appendTo('body').hide();
                })

                .hover(function() {
                    if ($(this).is('.'+selectedClassName))
                        return;
                    $(this).children().css('opacity', 1);
                }, function() {
                    if ($(this).is('.'+selectedClassName))
                        return;
                    $(this).children().css('opacity', transparency);
                })

                .click(function(ev) {
                    ev.preventDefault();

                    var self = $(this);

                    $main.fadeOut(imageFadeSpeed, function() {                      
                        var tempImg = $('<img src="'+ self.attr('rel') +'" width="'+ $main.width() +'" />').appendTo('body');
                        var newHeight = tempImg.height();
                        tempImg.remove();

                        $(this)
                            .attr('src', self.attr('rel'))
                            .height(newHeight);

                        $(this).fadeIn(imageFadeSpeed);
                    });

                    $gallery.find('.'+selectedClassName)
                        .removeClass(selectedClassName)
                        .children()
                        .css('opacity', transparency);

                    self
                        .addClass(selectedClassName)
                        .children()
                        .css('opacity', 1);
                    return;
                })

                .children()
                .css('opacity', transparency)
                .end()

                .filter(':first')
                .addClass(selectedClassName)
                .children()
                .css('opacity', 1);
        });
});

我已将悬停时的图像交换替换为降低服务器负载的不透明度更改，但您可以轻松地将这些替换为 src 交换。您只需要使用以“r.jpg”结尾的图像。

我还提取了一些配置变量，以便您可以尝试一下。

Answer 2

虽然我认为马特在脚本方面做得非常出色（为此 +1），但我仍然建议使用 GalleryView plugin (Demo here)。

---

我还在学习，所以我的假设可能不正确，如果我错了，请随时纠正我。但是在再次查看您的代码后，我想添加这些 cmets：

• 您的 mouse_overs 函数似乎修复了最初的“未选择”类。最好的解决方法是使用 jQuery 的“live”事件处理程序。这样，当您将选定的类更改为未选定的类时，反之亦然，实时事件将更新（注意：当前版本的 jquery 不支持悬停，因此您必须使用 mouseover 和 mouseout）。似乎悬停的鼠标悬停部分也被调用了 3 次，这也可能是相关的。
• 替换函数中使用的正则表达式不能正常工作。单击缩略图切换图像后，我注意到一旦鼠标移出（来自 thumb.mouseout 函数），URL 就开始将 r 添加到静态单词的末尾......大约 10 次鼠标移出后，我最终得到这个 URL “http://staticrrrrrrrrrr.yourdomain.com/someimage.jpg”。我不太了解我的正则表达式，因此无法帮助您解决此问题。
• 与其修改 URL，不如按照 Matt 的建议并使用 opacity 更容易，但如果您想使用不同的图像，我会将 URL 存储在 img 的 rel 属性中，然后以这种方式切换，那么 URL 出现问题的可能性就会降低。