0

如何使用 simplescroll 获得 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}
4

1 回答 1

0

该插件只能支持在一行中出现多个大小相等的元素。解决您的问题的方法是将其视为一个元素。如果您可以一次完整地看到它，请为您的列表设置样式，然后将其包装在一个额外的 div 中并在其上启动 simpleScroll 。

<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>
于 2011-09-09T10:13:38.130 回答