可以通过 jQuery 实现 ul 和 li 的垂直滚动吗?

发布于 2024-12-05 08:30:38 字数 659 浏览 0 评论 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>

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

So far my code:

<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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

明天过后 2024-12-12 08:30:38

您可以将内部 UL 发布到带有 Overflow:hidden 的 div 内,并上下移动内部 UL 的位置,从而创建一种滚动效果。

You could post the inner UL inside a div with overflow:hidden, and move the inside UL's position up and down, and by that creating a sort of a scroll effect.

不一样的天空 2024-12-12 08:30:38

@沙伊。你知道为什么这不起作用吗?我正在查明是否有超过三个 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();
}
});

@Shai. Do you know why this is not working. I am finding out if there is more than three LI than show arrows. Otherwise do not show arrows:

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
    });
});

UPDATED - Solution:

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();
}
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文