jQuery平滑滑动图库答案

【问题标题】：JQuery smooth sliding galleryjQuery平滑滑动图库
【发布时间】：2012-02-03 11:38:15
【问题描述】：

JQuery UI 幻灯片属性存在问题。这应该会轻轻滑出当前图像，而下一张图像会轻轻滑入。

$(document).ready(function(){
    $('.gallery img').hide(); $('.gallery img:first').show().addClass('galo');


    $('.galarr.r).click(function(){
        var next = $('.galo').next();
        $('.galo').hide('slide', {direction:'left'}, {duration:800, queue:false}).removeClass('galo'); $(next).show('slide', {direction:'right'}, {duration:800, queue:false}).addClass('galo');
});

});

在我们的网站上，它会将旧图像滑出并留下空白区域，然后突然出现下一张图像。

我已经设置了一个简单的 Fiddle，尽管有相同的代码，但它根本不起作用。有什么问题。

http://jsfiddle.net/W27YK/7/

Firebug 报告说 nextslide() 显然不是小提琴上的一个函数。

【问题讨论】：

看起来像您的 jsFiddle，并且您插入问题的代码不匹配。您需要帮助的是哪一个？在您粘贴在这里的代码中，请注意您在 .galarr.r 之后缺少一个选择器

标签： jquery css jquery-ui slide

【解决方案1】：

这是我认为您正在努力完成的工作jsFiddle。

要记住几件事。

如果元素是绝对定位的，滑动效果往往会更好。我为.gallery img 将其添加到您的样式中。
绝对定位项在定位于相对定位的父框时效果最佳，否则它们对于页面是绝对定位，而不是相对于父框绝对定位（这是预期的功能）
您会注意到，这也修复了右键/img 的位置，因为在您的精灵上，它位于文档正文右侧 15 像素，而不是 div 边缘右侧 15 像素。
我注意到您的按钮高度错误，并将其更新为精灵图像的高度。出于某种原因，它困扰着我 ;)。

关于代码...您已修改 CSS：

.gallery { position: relative; width:700px; height:370px; border-bottom:1px solid #DDD; overflow:hidden; }
.gallery img { width:700px; height:370px; border:0px; position: absolute;}

.gallery a.galarr.l { position:absolute; width:28px; height:50px; background:url(http://www.golfbrowser.com/wp-content/themes/RIK/images/core/galarr.png) left top no-repeat; position:absolute; top:160px; left:15px; display:block;} 
.gallery a.galarr.r{ position:absolute; width:28px; height:50px; background:url(http://www.golfbrowser.com/wp-content/themes/RIK/images/core/galarr.png) right top no-repeat; position:absolute; top:160px; right:15px; display:block;}

还有你修改后的javascript：

$(document).ready(function() {
    $('.gallery img').hide();
    $('.gallery img:first').show().addClass('galo');

    $('.galarr').click(function() {
        // one event handler to rule them all, both left and right!
        var $next, slideOutDir = '';

        // figure out what direction the images are sliding, and act accordingly.
        if ($(this).hasClass('l')) {
            slideOutDir = "right";
            // figure out rather the next slide is there, or we need to wrap to the end
            $next = $('img.galo').prev('img').length ? $('img.galo').prev('img') : $("img:last");
        }
        else {
            slideOutDir = "left";
            // figure out rather the next slide is there, or we need to wrap to the beginning
            $next = $('img.galo').next('img').length ? $('img.galo').next('img') : $(".gallery img:first");
        }

        if (!$next.length) {
            $next = $(".gallery img:first");
        }
        //$next.css('z-index', 5);
        //$('img.galo').css('z-index', 1);
        $('img.galo').hide('slide', {
            direction: slideOutDir
        }).removeClass('galo');
        $next.show('slide', {
            direction: (slideOutDir === "left" ? 'right' : 'left')
        }).addClass('galo');
    });

});

【讨论】：