单击屏幕上的菜单/幻灯片以导航到不同的页面

Question

我开发了一个示例网站。但我需要添加一个功能，当我单击并水平拖动页面时，将转到下一页（menulist上的menu2页面）。它应该在点击和拖动时发生。当我向后拖动（从左到右）时，页面转到上一页。当我点击菜单4时，点击菜单按钮。该页面在水平移动时转向第四页，就像在移动设备上移动一样。

我不知道如何实现它。我是这个领域的新手。 - （

Answer 1

如果你是新手，你需要学习而不是实施这项技术！

但是，您只需要使用mousedown和dragstart事件。

如果您正在使用jQuery，那么尝试了解onDrag事件并设置一个函数将页面更改为下一个菜单项。

Answer 2

最后我创造了它。

Click to see fiddle for slide and menu scrolling

按菜单点击滚动的JQuery ：

var total=$(window).width()*4;
$('.color').css({'width':''+$(window).width()+''});
$('.1').css({'position':'absolute','left':'0px'});
$('.2').css({'position':'absolute','left':''+$(window).width()+'px'});
$('.3').css({'position':'absolute','left':''+$(window).width()*2+'px'});
$('.4').css({'position':'absolute','left':''+$(window).width()*3+'px'});


$('a').click(function(){
    var num=$(this).attr('id');
    $('html').animate({'scrollLeft':''+$(window).width()*num+''});//For mozilla
    $('body').animate({'scrollLeft':''+$(window).width()*num+''});//For other browsers
});

JQuery用于在屏幕上滚动（双击并拖动触摸板）：

var downX;

$('body').mousedown(function(event){
   downX=event.clientX;
});
$('body').mouseup(function(event){
    var s=$('html').scrollLeft();
    var p=$('body').scrollLeft();

    var upX=event.clientX;
    var diff=downX-upX;
    if(diff<0)
    {
  $('html').animate({'scrollLeft':''+s-$(window).width()+''});//For mozilla
  $('body').animate({'scrollLeft':''+p-$(window).width()+''});//For other browsers
    }
    if(diff>0)
    {
        var g=s+$(window).width();
        var k=p+$(window).width();
  $('html').animate({'scrollLeft':''+g+''});//For mozilla
  $('body').animate({'scrollLeft':''+k+''});//For other browsers
    }
});

---

Click to see fiddle for menu click scrolling without animation

已更改 - ＆gt;

$('a').click(function(){
    var num=$(this).attr('id');
    $('html').animate({'scrollLeft':''+$(window).width()*num+''});//For mozilla
    $('body').animate({'scrollLeft':''+$(window).width()*num+''});//For other browsers
});

至 - ＆gt;

$('a').click(function(){
    var num=$(this).attr('id');
    $('html').scrollLeft($(window).width()*num);
    $('body').scrollLeft($(window).width()*num);
});