0

（別の順序付けされていないリストを作成せずに）単純なスクロールで1行ではなく4行を取得するにはどうすればよいですか？

このようなもの、4行、無限にスクロールする2つの画像を作成したい：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

プラグインは、1 つの行に表示される同じサイズの複数の要素のみをサポートできます。問題の解決策は、それを 1 つの要素として扱うことです。リスト全体を一度に表示できる場合は、リストをどのように表示するかをスタイルアップし、追加の div でラップして、その上で単にスクロールを開始します。

<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 に答える