3

このようなギャラリーを Flash で作成するための jQuery プラグインを探しています。

http://flash.tutfactory.com/interface/infinite-sliding-gallery/

「jquery 無限ギャラリー」、「jquery スクロール ギャラリー」などについて Google に問い合わせましたが、同様のものは見つかりませんでした。返されたのは、ページを下にスクロールしたときに Ajax によって読み込まれた無限スクロール ギャラリーだけでした。そのような機能を実装するプラグインを知っていますか? 無料か有料かは私には関係ありません。面白い私はこのスレッドを見つけました: https://stackoverflow.com/questions/13874677/ looking-for-jquery-infinite-carousel- with-mouseover-activation 同様の質問で、数日前に閉鎖されました。 . 私が見つけた jQuery で作成された最も近いものは次のとおりです 。 しかし、マウスの端にどれだけ近いかに応じてさまざまなスクロール速度を実装する方法と、スムーズにループさせる方法がわかりません。

助けてくれてありがとう。

4

2 に答える 2

0

マウスを使用してスクロールを制御する限り、これはマウスのスクロールがあるサイトから取得したコードですが、これは特定のサイズのギャラリー用であり、無限ではありません。adamb がコメントで述べたように、おそらく自分でビルドする必要がありますが、これはマウスの位置を検出するための開始コードとして機能する可能性があります。基本的には、画像がスクロールして見えなくなるときに画像を動かして、無限の錯覚を作成するだけです。左側にスクロールする場合は、スクロールしながら画像を右に移動し、その逆も同様です。

            $(function() {
buildThumbs();

function buildThumbs() {
    $('div.portfolio_gallery').each(function() {
        var width = 0;

        var wrapper = $(this).find('.gallery'); 
        wrapper.find('.scroller a').each( function() {
            width += $('.single_img').outerWidth(true);
        });

        var thumbs = $(this).find('.scroller');
        thumbs.css('width', width + 'px');

        makeScrollable(thumbs, wrapper);
    });
}
   function makeScrollable(thumbs, wrapper) {
    var width = wrapper.innerWidth();

    wrapper.scrollLeft(0);

    var leftBuffer = 100;
    var rightBuffer = 100;

    //When user move mouse over menu
    wrapper.unbind('mousemove').bind('mousemove', function(e) {
        var xPos = e.pageX - wrapper.offset().left - leftBuffer;
        var xMax = wrapper.innerWidth() - rightBuffer;
        if(xPos > 0 && xPos < xMax) {
            var perc = xPos / (xMax - leftBuffer);
            var scrollAmt = thumbs.outerWidth(true) - wrapper.innerWidth();
            wrapper.scrollLeft(perc * scrollAmt);
        }
    });
   }
 });
于 2012-12-18T20:26:50.950 に答える
0

スクロールの速度を上げたり下げたりしたい場合は、透明な div を作成して、マウスをホバーさせたい場所に置きます。次に、関数を実行します。

$("div").mouseover(function(){
    //increase here your speed
}).mouseout(function(){
    //decrease here your speed
});

ここに、無限カルーセル ギャラリーを作成する方法のチュートリアルがあります: http://www.queness.com/resources/html/carousel/index.html

于 2012-12-18T20:23:08.800 に答える