Jquery Cycle插件没有像我预期的那样工作

Jquery Cycle plug-in is not working as I expected

本文关键字：工作 插件 Cycle Jquery      更新时间：2023-09-26

我正在尝试在我的新网站上实现滚动库。我正在使用Cycle插件。当我把插件设置为效果"渐变"或"洗牌"和其他一些效果时，效果很好，但当我尝试使用我想要的效果（scrollLeft或scrollHorz）时，我的图像会消失吗？我不明白，我相信这可能与我的CSS有关。有人能看看我有没有遗漏什么吗？

CSS：

    div#slideshow {
width: 666px; height: 243px;
overflow: hidden;
position: relative; z-index: 5;
margin:15px 0 0 0;
float:left;
    }
div#slideshow ul#slides {
    list-style: none;
}
    div#slideshow ul#slides li {
        margin:0;
    }

Javascript：

        $(document).ready(function() {
        $("#slideshow").css("overflow", "hidden");
        $("ul#slides").cycle({
    fx: 'scrollLeft',
    pause: 1,
        });
        });

HTML:

        <div id="slideshow"><!--SLIDER-->
        <ul id="slides">
        <li><img src="images/sliderchorizosoup.jpg" alt="Chorizo Soup" /></li>
        <li><img src="images/sliderlamblegsteak.jpg" alt="Lamb Leg Steak" /></li>
        <li><img src="images/sliderdessert.jpg" alt="Dessert" /></li>
    </ul>
       </div><!--SLIDER-->

除了我们在注释中看到的逗号错误外，在chrome中，#slide容器的高度没有得到计算，但滑块工作得很好。你所要做的就是给容器增加一个高度，你的滑块就可以正常工作，就像这样：

#slides {
  height: 243px;
}

您的float:left似乎与div有关。您可以将li标记设置为float。检查此滑块

是：

$("#slideshow").css("overflow", "hidden");

应该是：

$("#slideshow").css("overflow":"hidden");
相关文章：