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

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

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

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

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

-Используйте смягчение

- Остановить прокрутку в начале или конце div (так же, как прокрутка в браузере)

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

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

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


slider scroll html jquery horizontal-scrolling
person rod    schedule 30.03.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

person Ilia Frenkel    schedule 30.03.2012
comment
Спасибо. Я добавил смягчение, которое работает только на первом прокрутке. Любая дополнительная прокрутка в том же направлении после этого (в зависимости от размера окна) не позволяет [замедлению] завершить свой полный цикл. Я считаю, что это связано с тем, что длина прокрутки предопределяется при загрузке и не учитывает то, что осталось прокрутить, что в данном случае меньше, чем первое. - person rod; 30.03.2012