JQuery - 自定义滑块 - 在到达末尾时限制幻灯片

发布于 2024-11-18 04:18:52 字数 3614 浏览 0 评论 0原文

我使用 JQuery 编写了一个自定义滑块来显示图像的缩略图。我有一个外部 div，滑块在其中移动。但是当幻灯片结束时，我不想进一步滑动（向左和向右）。我怎样才能做到这一点？

这是我的代码 - 您可以将其保存为 html 并运行它 -

<html>
<head>
    <title>Content Slider</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

        });

        function left() {
            $('#inner').animate({
                'marginLeft': "-=200px"
            }, 1000, function () {
            });
        }

        function right() {
            if ($('#inner').css('marginLeft') != "0px" && $('#inner').css('marginLeft') != "auto") {
                $('#inner').animate({
                    'marginLeft': "+=200px"
                }, 1000, function () {
                });
            }

        }
    </script>
</head>
<body>
    <div style="width: 800px; height: 200px; border: 3px solid #DADADA; overflow: hidden;
        padding: 5px;">
        <div id="inner" style="height: 190px; overflow: hidden;">
            <table cellpadding="0" cellspacing="5" style="width: 100%; height: 190px;">
                <tr>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <table style="width: 800px">
        <tr>
            <td align="left">
                <a href="Javascript:left();"><<</a>
            </td>
            <td align="right">
                <a href="Javascript:right();">>></a>
            </td>
        </tr>
    </table>
</body>
</html>

有什么想法吗？

原文

I've written a custom slider using JQuery to show thumbnails of images. I've a outer div inside which the slider moves. But when the slides come to an end I don't want to slide further (both left and right). How can I do that?

Here is my code - You can save it as html and run it -

<html>
<head>
    <title>Content Slider</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

        });

        function left() {
            $('#inner').animate({
                'marginLeft': "-=200px"
            }, 1000, function () {
            });
        }

        function right() {
            if ($('#inner').css('marginLeft') != "0px" && $('#inner').css('marginLeft') != "auto") {
                $('#inner').animate({
                    'marginLeft': "+=200px"
                }, 1000, function () {
                });
            }

        }
    </script>
</head>
<body>
    <div style="width: 800px; height: 200px; border: 3px solid #DADADA; overflow: hidden;
        padding: 5px;">
        <div id="inner" style="height: 190px; overflow: hidden;">
            <table cellpadding="0" cellspacing="5" style="width: 100%; height: 190px;">
                <tr>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                    <td valign="middle" align="center">
                        <div style="width: 200px; height: 100px; background-color: #DADADA">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <table style="width: 800px">
        <tr>
            <td align="left">
                <a href="Javascript:left();"><<</a>
            </td>
            <td align="right">
                <a href="Javascript:right();">>></a>
            </td>
        </tr>
    </table>
</body>
</html>

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忆悲凉 2024-11-25 04:18:52

我建议检查最初未显示的图像总数。在你的情况下，它是=总计 - 4（在页面最初加载时显示） - 称之为X。然后使用某种计数器来查看剩余边距减少的幅度不会超过200*X。

代码实现：

var x=4; //current total is 8 (-4 gives x)
        function left() {
if( parseInt($('#inner').css('marginLeft'))>-x*200){ // 200 is the size of each image
            $('#inner').animate({
                'marginLeft': "-=200px"
            }, 1000, function () {
            });
        }
}

I would suggest a check on the total number of images that is not initially shown. In your case it is = grand total - 4 (Shown when the page is initially loaded)- Call it X. Then use some sort of a counter to see that the margin left does not decrease by more than 200*X.

Code implementation:

var x=4; //current total is 8 (-4 gives x)
        function left() {
if( parseInt($('#inner').css('marginLeft'))>-x*200){ // 200 is the size of each image
            $('#inner').animate({
                'marginLeft': "-=200px"
            }, 1000, function () {
            });
        }
}

回复收藏 0 原文

~没有更多了~