Question

如何使用simplyscroll获取4行而不是1行（不创建另一个无序列表）？

我想创建这样的东西，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}

Answer 1

该插件只能支持一行中出现的相同大小的多个元素。您的问题的解决方案是将其视为一个元素。如果您可以立即将其全部显示在列表中，请按照您的列表设置样式，然后将其包装在一个额外的div中并启动simpleScroll on that。

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

如何使用jQuery SimplyScroll获取多行？

1 个答案: