0

我构建了一个使用 jquery 创建图像“循环”的图像滑块。如果您向右走，则第一个图像将被添加到末尾。如果你向左走，最后一张图片会在开头出现。margin-left-value 用于创建滑动外观。到目前为止它似乎有效，但在 Safari 中，边距的动画不起作用。它应该使用缓动函数在 -100px 和 -200px 之间缓和。但是有大约 4000px 的值。

还有其他人在 Safari 中遇到了这些跳跃问题，但我没有找到解决方案。

这是js：

window.onload = function ()
{
$inner = $('#wdgt_slider #inner');
$active = $('#wdgt_slider').children().first();
$slides = $('#wdgt_slider').children().length;

$inner.prepend($inner.children().last()).css({'-webkit-transition':' ', '-moz-transition':' ', '-o-transition':' ', 'transition':' ', 'marginLeft':'-100%'});

$('#wdgt_slider').delegate('input[type=radio]', 'change', function()
{
    if($(this).attr("checked") == "checked")
    {
        if( $(this).index() == ($inner.children().length-1) && $active.index() == 0 )
        {
            prev();
        }
        else if( $(this).index() == 0 && $active.index() == ($inner.children().length-1) )
        {
            next();
        }
        else if( $(this).index() < $active.index() )
        {
            prev();
        }
        else if( $(this).index() > $active.index() )
        {
            next();
        }
        $active = $(this);
    }
});
}

function next()
{
$inner.animate({
    marginLeft:"-200%"
},8000, $.easie(0.77, 0, 0.175, 1),function()
{
    //$inner.append($inner.children().first()).css({'-webkit-transition':' ', '-moz-transition':' ', '-o-transition':' ', 'transition':' ', 'marginLeft': "-100%"});
});
}

function prev()
{
$inner.animate({
    marginLeft:"0"
},8000, $.easie(0.77, 0, 0.175, 1), function()
{
    $inner.prepend($inner.children().last()).css('marginLeft', '-100%');
});
}

我没有作弊，因为问题在960网格系统内部更加明显。这是链接：http ://www.goldentree.de/wordpress/

4

2 回答 2

2

为了避免这个问题，对现代浏览器使用 CSS 过渡，其余的使用 jQuery 动画。我建议使用modernizr 来识别谁支持CSStransitions。

if( !Modernizr.csstransitions ){
  $('#gallery .slides').animate({"margin-left":'-200%'}, 750);
} else {
  $('#gallery .slides').css({"margin-left":'-200%'});
}
于 2013-01-24T22:11:26.927 回答
2

只是我对@Jason 的回答。

cssOrAnimate = Modernizr.csstransitions ? 'css' : 'animate';
$('#gallery .slides')[cssOrAnimate]({marginLeft:'-200%'});
于 2013-01-24T22:22:36.070 回答