HTML/CSS/Jquery content side scroller

Question

私は新しいサイトを開発し、http://www.brotips.com/と同様のコンテンツサイドスクロールを探しています。矢印キーを使用したり、コンテンツの下にある数字をクリックしたりできます。

あなたが推奨するライブラリやチュートリアルはありますか？この種の効果に適したチュートリアルは見つかりません。

これまでのところ私は、あなたがアヤックスにロードする方法を知っているDONOT場合、あなたはjQueryの-チュートリアルで簡単に学ぶことができ

<div style="width: 100%; overflow-x: scroll"> 
    <?php 
    //Get the number of posts from mysql database and the posts and output to table 
    ?> 
</div> 

Answer 1

私はGoogleでこれを見つけました。http://jqueryfordesigners.com/adding-keyboard-navigation/です。動作中のスライドショープラグインにキーボードナビゲーションを追加する方法を教えてくれます。

私がこれをやろうとすれば、そこから始めるでしょう。その後、イメージを実際のコンテンツに置き換えます。その後、実際の作業現場に適用し、ajaxifyします。コード内

Answer 2

でそれをやっについて考えています。 とにかく、私が使用する関数は次のようになります。

function() { 
$("#TheIdOfYourItem").hide("slide", { direction: "left" }, 1000, function() { 
$("TheIdOfTheNewStuff").show("slide, { direction: "left"}, 1000); 
}); 

} 

「TheIdOfYouritemは」あなたが知っている...隠された 「TheIdOfTheNewStuff」が必要なものとなります。）

Answer 3

あなたはサイトを分析する場合は、実際にスクロールではありません。実際には、キーを押してからメインコンテナを更新すると、Ajaxリクエストを送信します。また、URLをページ番号で更新しています。私あなたはjqueryのAjaxの機能を学ぶことができていることのようなもの（アヤックス（）、に.get（）、.post（））とエフェクト機能（フェードイン、フェードアウト）あなたはこちらをご覧http://www.chazzuka.com/ajaxify-your-web-pages-using-jquery-88/

にctake

を作りたいfを

Answer 4

demo jsBin

ダウンあなたは '矢印キー・ナビゲーション' を見つけることができます。

var slideN = $('.slide').length; 
var galW = $('#gallery').width(); 
var c = 0; 

// enlarge the slider element 
$('#slider').width(galW*slideN); 

// POPULATE NAVIGATION 
for(i=0; i<slideN; i++){ 
    $('#navigation').append('<div class="button">'+(i+1)+'</div>'); 
} 
// MAKE FIRST BUTTON 'active' 
$('#navigation .button').eq(0).addClass('curr'); 


// ADD PREV AND NEXT BTN TO NAVIGATION 
$('#navigation').prepend('<div class="nav prev">&#9668;</div>').append('<div class="nav next">&#9658;</div>'); 

// THE ANIMATION FUNCTION 
function slide(){ 
    $('#slider').stop(1).animate({left:'-'+(galW*c)},1000); 
    $('.button').eq(c).addClass('curr').siblings().removeClass('curr'); 
} 

// NAVIGATION (numbered) BUTTONS 
$('.button').click(function(){ 
    c = $(this).index()-1; 
    slide(); 
}); 

// COUNTER HANDLER 
function ch(){ 
    if(c === -1){c = slideN -1; return;} 
    c = c % slideN; 
} 

// PREV/NEXT NAVIGATION 
$('.nav').click(function(){ 
    if($(this).hasClass('next')){ 
    c++; ch(); slide(); 
    }else{ 
    c--; ch(); slide(); 
    }  
}); 

// ARROW KEY NAVIGATION 
$(document).keydown(function(e){ 
    if (e.keyCode === 37) { // if left arrow 
      $('.prev').click(); 
      return false; 
    } else if (e.keyCode === 39) { // if right arrow 
      $('.next').click(); 
      return false; 
    } 
});