使用jquery向左滑动和向右滑动

Question

嗨，朋友 m 正在尝试制作一个向左或向右滑动的菜单栏。此导航栏由两个箭头控制，如果用户将鼠标悬停在右箭头上，则导航将从右向左移动直到结束，当它到达最后一点时，它将停止。当用户将鼠标悬停在左箭头上时，也会发生同样的事情，导航将从左向右移动，当到达最后一个点时，它将停止滑动

我不知道如何将所有东西组装在一起，请在此处查看小提琴 http://jsfiddle.net/DdkLS/

HTML

<div class="nav">
  <div class="arrowLeft"><</div>
  <div class="arrowRight">></div>
  <div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Customer</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">why us</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Customer</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">why us</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Customer</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">why us</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Customer</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">why us</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Customer</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">why us</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Customer</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">why us</a></li>
    </ul>
  </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.nav {
    width: 940px;
    margin: 10px auto 0 auto;
    padding: 15px 25px;
    background: #C00;
    position: relative;
}
.nav .arrowLeft {
    position: absolute;
    left: 10px;
    top: 22px;
    cursor: pointer;
}
.nav .arrowRight {
    position: absolute;
    right: 10px;
    top: 22px;
    cursor: pointer;
}
.nav div {
    overflow: hidden;
    position: relative;
    height: 23px;
}
ul {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
}
li {
    float: left;
    list-style: none;
    float: left;
}
li a {
    text-decoration: none;
    color: #fff;
    padding: 8px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
}

脚本

var leftMove = 0;   
        var rightMove = 0;  
        var leftValue = $('.nav').find('ul').css('left');           
        var rightValue = $('.nav').find('ul').css('right'); 
        var rightNumeric = parseInt(rightValue);
        var leftNumeric = parseInt(leftValue);
        alert(rightNumeric);

    $('.arrowLeft').mouseenter(function(){              
        setInterval(function(){
            if(rightNumeric < 0)
            {
                leftMove = leftMove+10;
                $('.nav ul').animate({left : '-'+leftMove+'px'},1);     

            }
            if(rightNumeric > 0)
            {

                $('.nav ul').css('left','-'+rightNumeric+'px');     

            }
        },1)


        })

        $('.arrowRight').mouseenter(function(){             
        setInterval(function(){
            if(leftNumeric < 0)
            {
                leftMove = leftMove+10;
                $('.nav ul').animate({left : ''+leftMove+'px'},1);      

            }
            if(rightNumeric > 0)
            {

                $('.nav ul').css('left',''+rightNumeric+'px');      

            }
        },1)


        })

请帮帮我..提前谢谢..:)

Answer 1

试试这个：

$('.arrowLeft').mouseenter(function(){
    $('.nav ul').animate({ left: '+=120' }, 400 );
});

$('.arrowRight').mouseenter(function(){
    $('.nav ul').animate({ left: '-=120' }, 400 );
});

注意：你需要在移动left或right之前管理空间，我这里只是给个提示。

这是一个有效的demo

更新

最好使用jQuery插件，看看这个

1. http://rascarlito.free.fr/hoverscroll/
2. http://www.smoothdivscroll.com/
3. http://www.tonylea.com/2011/jquery-horizontal-scrollbars/

希望对你有帮助！

Answer 2

如果我理解正确，您正在寻找这样的东西 - Example

由于您的 ul 周围有一个限制宽度包装器 .nav(width=940px)，我们计算它的宽度并将 ul 向右移动，该值减去第一个子元素。

  shift = $(wrapper).width() - $(li).first().width();

为了向左移动，我们需要将滑块移动实际的 ul 宽度减去最后一个子宽度。

注意，我已经更改了 ul 宽度的 css 属性（我将其设置为 99999px），这是为了确保浮动的 lis 不会转到另一行。