0

例： http: //www.net-a-porter.com/product/163606

これまでのところ私のコード:

<style type="text/css">
li {float:left;height:50px}
</style>
<div style="height:100px">
    <a href="#" class="top">up</a>
    <ul>
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
        <li>Product 4</li>
        <li>Product 5</li>
        <li>Product 6</li>
    </ul>
    <a href="#" class="down">down</a>
</div>
4

2 に答える 2

3

内側の UL を、overflow:hidden を使用して div 内に投稿し、内側の UL の位置を上下に移動して、一種のスクロール効果を作成することができます。

于 2011-09-19T14:35:33.613 に答える
0

@シャイ。なぜこれが機能しないのか知っていますか。矢印を表示するよりも 3 つ以上の LI があるかどうかを調べています。それ以外の場合は矢印を表示しません:

jQuery(document).ready(function() {
var ulx;
var totalli;
ulx     = document.getElementById("mycarousel");
totali  = ulx.children.length;
if (totali > 3){
        $(".jcarousel-next").hide();
        $(".jcarousel-prev").hide();
    }else{
        // buttons appear
    }
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 2
    });
});

更新 - 解決策:

jQuery(document).ready(function() {
var ulx     =   document.getElementById("mycarousel");
var totalli =   ulx.children.length;
if (totalli > 3) { 
    jQuery('#mycarousel').jcarousel({vertical:true,scroll:2});
} else {
    jQuery('#mycarousel').jcarousel({vertical:true,scroll:2});
    $(".jcarousel-next").hide();$(".jcarousel-prev").hide();
}
});
于 2011-09-20T09:30:53.277 に答える