1

特定のタイプのコンテンツ スライダーを探していますが、必要なものを正確に見つけることができませんでした。私が見つけにくいのはコンテンツ スライダーではなく、特定の種類のページャーを備えたスライダーです。下の画像からわかるように、実際のコンテンツが表示される場所の下に赤いバーがあります。私が探しているのは、コンテンツに合わせて変更するのではなく、前後にスライドすることです。また、マウスでつかんで左右にスライドさせ、スライドさせると内容が変わるようにしたいと思います。また、ページの読み込み時に自動的に再生し、ホバー時に一時停止したいと考えています。どんな提案でも大歓迎です。ありがとう！

スライダーのスクリーンショット

4

3 に答える 3

1

私が作成したjQueryUIを使用して：

jsBinデモ

var $sl = $('#slider');
var slW = $sl.outerWidth(true);
var slN = $sl.children().length;
var c = 0;
var W = slW/slN;
$('#scroller, #nav_btns li').width(W);


function move(){
  c = c==-1 ? slN-1 : c%slN;
  $sl.stop().animate({scrollLeft: slW*c},1000);
  $('#scroller').stop().animate({left: W*c},500);
}

$('#prev, #next').click(function(e){
  var btn = this.id==='next'?c++:c--;
  move();
});

$('#nav_btns li').click(function(){
  c= $(this).index();
  move();
});

$("#scroller").draggable({
    containment:'parent',
    stop: function(){
        var stopPos = $(this).position().left;
        c = (Math.abs(stopPos/W).toFixed(0));
        move();
    }
});

EDITは、 AUTOSLIDEを追加し、赤いドラッグ可能なスライダーを改善しました。

jsBinデモ2

于 2012-08-30T19:35:57.100 に答える
1

JCarousel は簡単​​な JQuery スライダー プラグインです。次のリンクを確認してください http://sorgalla.com/projects/jcarousel/examples/static_simple.html

于 2012-08-30T18:31:23.570 に答える
0

少し疑似コードを作成します。スライドIDを持つ配列があります...バーのキー位置は、バーの合計サイズを取得し、配列の長さで割ることによって検出されます。各アイテムのサイズは次のようになります。 occupyは、乗算することにより、ピクセル単位の位置（アンカー）を提供できます。ここで、スライドの全幅を並べて取得します。いくつかの簡単な比例計算により、バーの位置に基づいてスライドラッパーの位置を設定できます。自動スライドオプションを使用すると、アンカー位置を介して別の位置にアニメーション化するだけです。

于 2012-08-30T18:35:47.710 に答える