Question

我有一个带有一堆图像的div。使用左右箭头控件。我希望我的div使用箭头控件左右滚动图像。我可以找到垂直向上和向下滚动div但现在左右？

Answer 1

通过编辑滚动元素的scrollLeft DOM属性，可以在单击箭头时向左和向右滚动。

使用jQuery，您可以使用.scrollLeft()函数获取或设置scrollLeft属性 - link to docs

这是一个我刚刚编写的非常简单的页面，显示了行为：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript">
    function scrollDiv(dir, px) {
        var scroller = document.getElementById('scroller');
        if (dir == 'l') {
            scroller.scrollLeft -= px;
        }
        else if (dir == 'r') {
            scroller.scrollLeft += px;
        }
    }
</script>

<style type="text/css">
    #scroller {
        width: 400px;
        height: 400px;
        border: 1px solid blue;
        overflow: scroll;
        margin: 0 auto;
    }
    #inner-scroller {
        width: 800px;
        height: 800px;
    }
</style>

</head>
<body style="text-align: center;">

<a href="javascript: void(0);" onclick="scrollDiv('l', 20); return false;">scroll left</a>
|
<a href="javascript: void(0);" onclick="scrollDiv('r', 20); return false;"> scroll right</a>

<div id="scroller">
    <div id="inner-scroller">
        800x800
    </div>
</div>    
</body>
</html>

Answer 2

查看这个名为jcarousel的jquery插件

http://sorgalla.com/jcarousel/

Answer 3

查看优秀的轻量级jQuery插件，它允许您进行所有类型的滚动。

http://flowplayer.org/tools/demos/scrollable/index.html

Answer 4

以下是一些用于处理图像的有用jQuery插件。我相信其中一个适合你的目的。

14个用于处理图像的jQuery插件 http://sixrevisions.com/resources/14-jquery-plugins-for-working-with-images/

使用控件水平滚动div图像

4 个答案: