如何使用jQuery SimplyScroll獲取多行？

我怎樣才能得到4行而不是一個與simplyscroll（沒有創建另一個無序列表）？如何使用jQuery SimplyScroll獲取多行？

我想創造這樣的事情，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}

來源

2011-08-22 Maarten

該插件只能支持出現在一行中的多個相同大小的元素。解決您的問題是將其視爲一個元素。如果你可以一次性看到你的清單，你可以調整清單的樣式，然後將其包裝在一個額外的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>

來源

2011-09-09 10:13:38 Logicbox

如何使用jQuery SimplyScroll獲取多行？

回答

相關問題