scrolling a div of images horizontally with controls

后端未结

关注

 1  1427

I have a div with a bunch of images in it. With arrow controls to the left and right. I want my div to scroll right and left through the images with the arrow controls. I can

相关标签:

1条回答

广开言路

2021-02-11 10:03

You can scroll left and right when clicking on your arrows by editing the scrollLeft DOM property of the scrolling element.

Using jQuery, you can use the .scrollLeft() function to get or set the scrollLeft property - link to docs

Here is a really simple page I just cooked up that shows the behavior:

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

0 讨论(0)