Как я могу получить несколько строк с jQuery SimplyScroll? - PullRequest
Новая
       10

Как я могу получить несколько строк с jQuery SimplyScroll?

0 голосов
/ 22 августа 2011

Как я могу получить 4 строки вместо одной с простым прокруткой (без создания другого неупорядоченного списка)?

Я хочу создать что-то вроде этого, 4 строки, пару изображений, бесконечно прокручиваемых: http://img109.imageshack.us/img109/8131/unled1wfk.jpg

У меня есть этот код: 

<body>
<ul id="scroller">
    <li><img src="DP-500S-01.jpg" width="96" height="72" /></li>
    <li><img src="DP-500S-02.jpg" width="96" height="72"></li>
    <li><img src="DP-500S-03.jpg" width="96" height="72"></li>
    <li><img src="DP-500S-04.jpg" width="96" height="72"></li>
    <li><img src="DP-500S-05.jpg" width="96" height="72"></li>
    <li><img src="DP-500S-06.jpg" width="96" height="72"></li>
    <li><img src="DP-500S-07.jpg" width="96" height="72"></li>
    <li><img src="DP-500S-08.jpg" width="96" height="72"></li>
    <li><img src="DP-500S-09.jpg" width="96" height="72"></li>
    <li><img src="DP-500S-10.jpg" width="96" height="72"></li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.simplyscroll-1.0.4.js"></script>
<script type="text/javascript">
(function($) {
    $(function() { //on DOM ready
        $("#scroller").simplyScroll({
            autoMode: 'loop'
        });
    });
})(jQuery);
</script>

С этим css: 

.simply-scroll-container{position:relative}

.simply-scroll-clip{position:relative; overflow:hidden; z-index:2}

.simply-scroll-list{position:absolute; top:0; left:0; z-index:1; overflow:hidden; margin:0; padding:0; list-style:none}

.simply-scroll-list li{padding:0; margin:0 10px 25px 0; list-style:none}

.simply-scroll-list li img{border:none; display:block}

.simply-scroll{width:960px; height:355px; margin:0 auto; line-height:97px}

.simply-scroll .simply-scroll-clip{width:960px; height:355px}

.simply-scroll .simply-scroll-list li{float:left; width:96px; height:72px}

1 Ответ

0 голосов
/ 09 сентября 2011

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

<div id="scroller">
    <ul>
       <li><img src="DP-500S-01.jpg" width="96" height="72" /></li>
       <li><img src="DP-500S-02.jpg" width="96" height="72"></li>
       <li><img src="DP-500S-03.jpg" width="96" height="72"></li>
       <li><img src="DP-500S-04.jpg" width="96" height="72"></li>
       <li><img src="DP-500S-05.jpg" width="96" height="72"></li>
       <li><img src="DP-500S-06.jpg" width="96" height="72"></li>
       <li><img src="DP-500S-07.jpg" width="96" height="72"></li>
       <li><img src="DP-500S-08.jpg" width="96" height="72"></li>
       <li><img src="DP-500S-09.jpg" width="96" height="72"></li>
       <li><img src="DP-500S-10.jpg" width="96" height="72"></li>
    </ul>
</div>
...