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

@ジェイソンの答えのちょうど私のバージョン。

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

この問題を回避するには、最新のブラウザーには CSS Transitions を使用し、その他のブラウザーには jQuery animate を使用してください。CSStransitions をサポートしているユーザーを認識するために、modernizr を使用することをお勧めします。

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