demo jsBin 的

Question

我希望开发一个新网站，我正在寻找类似于http://www.brotips.com/的内容侧滚动条，您可以使用箭头键/点击内容下方的数字。

您是否有任何图书馆或教程，我找不到适合此类效果的教程。

到目前为止，我一直在考虑使用

<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

我谷歌了，发现了这个，http://jqueryfordesigners.com/adding-keyboard-navigation/。教您如何将键盘导航添加到正常工作的幻灯片插件。

如果我这样做，就会从那里开始。然后用实际内容替换图像。然后申请到实际工作地点和ajaxify。

Answer 2

如果你不知道如何加载Ajax，你可以通过JQuery教程轻松学习它。无论如何，我将使用的功能是：

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

}

“TheIdOfYouritem”将是你需要隐藏的东西 “TheIdOfTheNewStuff”......你知道;）

Answer 3

如果您分析网站，实际上它不是滚动。实际上，当您按一个键然后更新de main容器时，它会发送一个ajax请求。它还使用页码更新URL。如果你想做类似的东西，你可以学习jquery ajax函数（ajax（）,. get（），。post（））和效果函数（fadeIn，fadeOut）

你在这里看一看http://www.chazzuka.com/ajaxify-your-web-pages-using-jquery-88/

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;
    } 
});

HTML / CSS / Jquery内容侧滚动条

4 个答案:

demo jsBin 的