文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用jQuery SimplyScroll获取多行？

问如何使用jQuery SimplyScroll获取多行？
EN

Stack Overflow用户

提问于 2011-08-22 18:25:05

回答 1查看 1.1K关注 0票数 0

如何使用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}

jquery

gallery

infinite-scroll

回答 1

Stack Overflow用户

发布于 2011-09-09 18:13:38

插件只能支持多个大小相等的元素出现在一行中。你的问题的解决方案是把它当作一个元素。如果你可以一次看到列表的全部内容，那么你可以按照你想要的样式来设置列表的样式，然后将它包装在一个额外的div中，并在这个div上启动simplyScroll。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7146071

复制

相似问题

问如何使用jQuery SimplyScroll获取多行？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery SimplyScroll获取多行？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery SimplyScroll获取多行？
EN