jquery 翻转混乱

Question

试图让我的翻转改变翻转时的 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

虽然我认为 Matt 的脚本做得非常出色（+1），但我仍然建议使用 GalleryView 插件< /a> （此处演示）。

---

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

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