Question

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

});

在我们的网站上，它会将旧版本滑出一个空格，然后突然出现下一张图像。

我设置了一个小提琴，尽管有相同的代码，但它根本不起作用。有什么问题。

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

Firebug报道说nextslide（）在小提琴上并不是一个功能。

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

});

JQuery光滑的滑动画廊

1 个答案: