jQueryプラグイン—【画像文字ループスクロール】


このブログでは、このようなループスクロールプラグインを発表しましたが、最近は比較的コンパクトで実用的なプラグインを見て、一緒に研究を共有しています.各スクロール要素の幅または高さが統一されていないことが特徴です.文字にかかわらず画像にかかわらずループ表示、いわゆる無停止表示です.
まず最初の状況を見てみましょう.
要素の合計高さはコンテナの高さより小さく、スクロールしません.
2つ目のケース1つ目のケースの比較:
要素行の高さを統一しないことができます
呼び出し方法:
$(".scroll_two").jScroll({vertical: true});  
<h2>         </h2>  
<div class="box scroll_two">  
    <ul>  
        <li><a href="#">  </a>| <a href="#">               </a></li>  
        <li><a href="#">  </a>| <a href="#">              9    </a></li>  
        <li><a href="#">  </a>| <a href="#">          ,        </a></li>  
        <li><a href="#">  </a>| <a href="#">                </a></li>  
        <li><a href="#">  </a>| <a href="#">2009CIHAF         </a></li>  
        <li><a href="#">  </a>| <a href="#">       50%     ?</a></li>  
    </ul>  
</div>  

3つ目の状況画像:
左に反転
呼び出し方法(実際には同じ):
$(".scroll_three").jScroll({speed: 2000, scroll: 3}); 
<h2>    </h2>  
<div class="box scroll_three">  
    <ul>  
        <li><a href="#"><img src="images/1.jpg" width="130" height="107" alt="" /></a></li>  
        <li><a href="#"><img src="images/2.jpg" width="130" height="107" alt="" /></a></li>  
        <li><a href="#"><img src="images/3.jpg" width="130" height="107" alt="" /></a></li>  
        <li><a href="#"><img src="images/4.jpg" width="130" height="107" alt="" /></a></li>  
        <li><a href="#"><img src="images/5.jpg" width="130" height="107" alt="" /></a></li>  
        <li><a href="#"><img src="images/6.jpg" width="130" height="107" alt="" /></a></li>  
    </ul>  
</div>  

demoダウンロード例の表示