JQuery - Пользовательский слайдер - Ограничение слайда, когда он достигает конца - PullRequest
Новая
       16

JQuery - Пользовательский слайдер - Ограничение слайда, когда он достигает конца

0 голосов
/ 01 июля 2011

Я написал собственный слайдер, использующий 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>

Есть идеи?

1 Ответ

1 голос
/ 01 июля 2011

Я бы предложил проверить общее количество изображений, которые изначально не показывались. В вашем случае это = общий итог - 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 () {
            });
        }
}
...