jQuery Carousel 首先显示所有图片然后工作正常

发布于 2024-10-30 21:54:20 字数 767 浏览 3 评论 0原文

我目前在我的网站 http://www.ambassadorsofnowhere.com 上使用 jQuery 轮播。但是，当加载第一页时，轮播首先显示所有图片，一秒钟后消失，然后就可以正常工作了。以前有人遇到过这个问题吗？下面您可以看到轮播中的图像列表

            <div id="slider">
            <ul id="mycarousel" class="jcarousel-skin-carousel">
                <li><img src="<?php echo base_url(); ?>img/1.jpg" width="800" height="300" alt="" /></li>
                <li><img src="<?php echo base_url(); ?>img/2.jpg" width="800" height="300" alt="" /></li>
                <li><img src="<?php echo base_url(); ?>img/3.jpg" width="800" height="300" alt="" /></li>
            </ul>
        </div>

原文

I am currently using jQuery carouses on my website http://www.ambassadorsofnowhere.com. But when the first page loads, the carousel first shows all pictures, which disappear after a second and then it works fine. Did anyone have this problem before? Below you can see the list of images in the carousel

            <div id="slider">
            <ul id="mycarousel" class="jcarousel-skin-carousel">
                <li><img src="<?php echo base_url(); ?>img/1.jpg" width="800" height="300" alt="" /></li>
                <li><img src="<?php echo base_url(); ?>img/2.jpg" width="800" height="300" alt="" /></li>
                <li><img src="<?php echo base_url(); ?>img/3.jpg" width="800" height="300" alt="" /></li>
            </ul>
        </div>

分享到QQ

分享到微博

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

发布评论

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

一抹微笑 2024-11-06 21:54:20

好吧，这个 CSS 解决方案可以解决这个问题：

div.slider {
    max-width: 300px;
    overflow: hidden;
}

尝试一下，并最终适应您的需求，这只是向您展示原理。

Well, this CSS solution will do the trick :

div.slider {
    max-width: 300px;
    overflow: hidden;
}

Try it out, and eventually adapt it to your needs, this is just to show you the principle.

回复收藏 0 原文

撩人痒 2024-11-06 21:54:20

您可以为除第一项之外的列表项设置显示：无，然后在调用 jQuery 轮播设置要阻止的项目显示之前

 <div id="slider">
        <ul id="mycarousel" class="jcarousel-skin-carousel">
            <li><img src="<?php echo base_url(); ?>img/1.jpg" width="800" height="300" alt="" /></li>
            <li style="display:none"><img src="<?php echo base_url(); ?>img/2.jpg" width="800" height="300" alt="" /></li>
            <li style="display:none"><img src="<?php echo base_url(); ?>img/3.jpg" width="800" height="300" alt="" /></li>
        </ul>
    </div>
<script>
jQuery("#slider ul li").css("display:block");
\\ carousel call
</script>

you can set display:none for list items except first item then before call jQuery carousel set display of items to block

 <div id="slider">
        <ul id="mycarousel" class="jcarousel-skin-carousel">
            <li><img src="<?php echo base_url(); ?>img/1.jpg" width="800" height="300" alt="" /></li>
            <li style="display:none"><img src="<?php echo base_url(); ?>img/2.jpg" width="800" height="300" alt="" /></li>
            <li style="display:none"><img src="<?php echo base_url(); ?>img/3.jpg" width="800" height="300" alt="" /></li>
        </ul>
    </div>
<script>
jQuery("#slider ul li").css("display:block");
\\ carousel call
</script>

回复收藏 0 原文

~没有更多了~