JQuery平滑滑动画廊 [英] JQuery smooth sliding gallery

问题描述

遇到JQuery UI幻灯片属性的问题。

Having an issue with JQuery UI slide property. This should produce a gentle slide out of the current image whilst the next image gently slides in.

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

});

在我们的网站上，而是滑动旧的，留下一个空白，然后下一个图像突然出现。

On our website it instead slide the old one out leaving a blank space and then the next image suddenly appears.

我设置了一个小提琴，简单不工作，尽管有相同的代码。有什么问题。

I have set up a Fiddle that simple does not work at all despite have the same codes. What is the problem.

http：// jsfiddle。 net / W27YK / 7 /

Firebug报告说，nextslide（）不是一个非常简单的函数。

Firebug reports that nextslide() is not a function on the fiddle when it quite clearly is.

推荐答案

这是一个有效的 jsFiddle

有几件事要记住。

• 如果元素位于绝对位置，幻灯片效果会更好。我添加到你的样式为 .gallery img 。


• 绝对定位的项目工作最好的定位在父框，否则它们是页面的绝对位置，而不是相对于父对象的绝对位置（这是预期的功能）。


• 你会注意到这也固定了右键的位置/ img，就像在你的sprite上，它位于文档正文的15像素，而不是div边缘的15像素。


• 我注意到你的按钮的高度错误，是sprite图像的高度。

• The slide effect tends to work alot better if the elements are positioned absolute. I added that to your styles for .gallery img.
• Absolute positioned items work best when positioned in a parent box that is positioned relative, otherwise they are absolute to the page, instead of being absolute positioned relative to the parent (which is the intended functionality)
• You'll notice that this also fixed the positioning of the right button/img, as on your sprite it was positioned 15 pixels right of the document body, not 15 pixels right of the div edge.
• I noticed that your buttons were the wrong height and updated that to be the sprite image's height. For some reason it was bugging me ;).

在代码...你修改了CSS：

On to the code... You're revised 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：

And your revised 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平滑滑动画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！