jquery запускает горизонтальную прокрутку динамической динамической ширины div, конец / начало остановки, окно ширины get - PullRequest
Новая
       34

jquery запускает горизонтальную прокрутку динамической динамической ширины div, конец / начало остановки, окно ширины get

0 голосов
/ 30 марта 2012

Полагаю, это, по сути, слайдер jquery , за которым я следую, но ни один из тех, которые я пробовал ( Каруфредсел, Эластислайд, Сладкивскролл * ), делает именно то, что я хочу, и большинство предлагаетслишком много дополнительных функций, которые мне не нужны.Все, что я действительно хочу сделать, это запустить горизонтальную прокрутку браузера с помощью jquery , чтобы я мог скрыть полосу прокрутки и использовать кнопку для запуска прокрутки.

Требования:
- Горизонтально прокручиваемый div с шириной 100%, поэтому независимо от размера окна браузера изображения заполняются слева направо.( готово, см. Ссылку ниже )

-Ширина изображений варьируется

-Перемещайте левую или правую прокрутку, нажимая на внешнем элементе управления, как <div id="scroll-left">scroll left</div> с помощьюпо одной странице за раз.

-Использование замедления

-Прекращение прокрутки в начале или конце div (точно так же, как действует прокрутка браузера)

То, что я считаю, должно произойтипредназначен для jquery , чтобы получить текущую ширину div или окна браузера, чтобы иметь возможность знать, как далеко прокручиваться, затем необходимо знать, когда остановиться.

Возможно, это проще, чем это.

У меня есть базовый макет горизонтальной прокрутки div pre jquery: ЗДЕСЬ

1 Ответ

1 голос
/ 30 марта 2012

Это «быстрый-грязный» пример, который я придумал: 

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

Надеюсь, это укажет вам правильное направление.

...