jQuery的触发水平滚动，停止年底/ beggining，得到宽度窗口

我想这基本上是一个jQuery的滑块我之后，却没有一个人的我都试过（caroufredsel，elastislide，smoothdivscroll的）正是我想要的，而且大多数提供了太多额外的功能，我不需要。我真正想要做的就是触发浏览器的水平滚动，通过jquery，所以我可以隐藏滚动条并使用按钮来触发滚动。

要求：
-a水平滚动div宽度为100％，所以无论浏览器的窗口大小如何，图像都会从左到右边缘填充。（完成，见下文链接）

图像的-The宽度变化

- 触发器向左或通过在一个时间点击外部控制像<div id="scroll-left">scroll left</div>由一个页面向右滚动。

- 使用宽松

-Stop在开头或DIV（就像一个浏览器的滚动行为）的结束

jQuery的触发水平滚动，停止年底/ beggining，得到宽度窗口

滚动相信什么人，何时是jQuery的得到的当前宽度div或浏览器窗口能够知道滚动的距离，然后需要知道何时停止。

也许它比这更简单。

我有一个基本的水平滚动格前jquery样机：HERE

任何帮助指出我在正确的方向将不胜感激。

来源

2012-03-30 rod

这是我想出了一个“快速正脏”的例子：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Example</title> 
     <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
     <script type="text/javascript"> 
      var curPage = 0; 
      $(document).ready(function(){ 
       var div = $("#scrolldiv"); 
       div.scrollLeft(0); 

       $("#scroll-right").click(function(){ 
        var curPos = div.scrollLeft(); 
        var curImage = div.find("img:eq("+curPage+")"); 
        if (curImage) { 
         width = curImage.width(); 
         div.animate({scrollLeft: curPos+width}, 'slow'); 
        } 
        curPage = curPage + 1; 
       }); 

       $("#scroll-left").click(function(){ 
        var curPos = div.scrollLeft(); 
        curPage = curPage - 1; 
        var curImage = div.find("img:eq("+curPage+")"); 
        if (curImage) { 
         width = curImage.width(); 
         div.animate({scrollLeft: curPos-width}, 'slow'); 
        } 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="scrolldiv" style="width:100%;height:490px;float:left;display:inline;white-space: nowrap;overflow:hidden"> 
      <img src="ukvogue2.jpg" width="693" heigh="458" /> 
      <img src="ukvogue2.jpg" width="193" heigh="458" /> 
      <img src="ukvogue2.jpg" width="693" heigh="458" /> 
      <img src="ukvogue2.jpg" width="493" heigh="458" /> 
      <img src="ukvogue2.jpg" width="593" heigh="458" /> 
      <img src="ukvogue2.jpg" width="393" heigh="458" /> 
      <img src="ukvogue2.jpg" width="293" heigh="458" /> 
     </div> 
     <a href="#" id="scroll-left">Left</a>&nbsp;|&nbsp; 
     <a href="#" id="scroll-right">Right</a> 
    </body> 
</html>

希望这将指向你到正确的方向。

来源

2012-03-30 02:18:03

谢谢。我添加了只能在第一次滚动时使用的缓动。在此之后的任何额外的滚动方向（取决于寡妇大小）不允许[宽松]完成其整个周期。我相信这是因为滚动长度是根据负载预先确定的，并没有考虑剩余滚动的情况，在这种情况下，滚动长度小于第一个。 – rod 2012-03-30 19:40:43

jQuery的触发水平滚动，停止年底/ beggining，得到宽度窗口

回答

相关问题