Question

我想在我的新网站上实现滚动图库。我正在使用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-->

Answer 1

除了我们在评论中发现的逗号错误之外，在chrome中#slide容器的高度未计算但是滑块工作得很好。您所要做的就是为该容器添加一个高度，滑块的工作正常，如下所示：

#slides {
  height: 243px;
}

Answer 2

看起来你的浮动：左边与div有关。您可以将li标签设置为浮动。 Check This slider

Answer 3

是：

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

应该是：

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

Jquery Cycle插件无法正常工作

3 个答案: