Question

我认为这实际上是我所追求的 jquery 滑块，但我尝试的那个（ caroufredsel，elastislide，smoothdivscroll ）都没有完全符合我的要求。大多数提供了太多我不需要的额外功能。我真正想做的就是通过 jquery 触发浏览器的水平滚动，这样我就可以隐藏滚动条并使用按钮来触发滚动。

的要求：
- 具有100％宽度的水平滚动div，因此无论浏览器的窗口大小如何，图像都从左边缘到右边缘填充。（已完成，请参阅下面的链接）

- 图像的宽度不同

- 通过一次单击<div id="scroll-left">scroll left</div>等外部控件来触发向左或向右滚动。

- 使用缓和

- 在div的开头或结尾处停止滚动（就像浏览器的滚动动作一样）

我认为必须发生的是 jquery 来获取div的当前宽度或浏览器窗口以便能够知道滚动的距离，然后需要知道何时停止。 / p>

也许比这简单。

我有一个水平滚动div pre jquery的基本模型：HERE

Answer 1

这是一个快速肮脏的＆＃34;我提出的例子：

<!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>

希望这会指向正确的方向。

jquery触发流体动态宽度div的水平滚动，停止结束/开始，获取宽度窗口

1 个答案: