How can I get multiple rows with jQuery SimplyScroll?
How can I get 4 rows instead of one with simplyscroll (without creating another unordered list)?
I want to create something like this, 4 rows, a couple of images, which scrolls infinite: http://img109.imageshack.us/img109/8131/unled1wfk.jpg
I've got this code:
<body>
<ul id="scroller">
<li><img src="DP-500S-01.jpg" width="96" height="72" />开发者_StackOverflow;</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>
With this 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}
The plugin can only support mulitple elements of equal sizes appearing in one row. The solution to your problem is to treat it as one element. Style up your list how you'd like it to appear if you could see it in it's entirety at once, then wrap it in an extra div and initiate simplyScroll 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>
加载中,请稍侯......
精彩评论