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

【问题标题】：Jquery Cycle plug-in is not working as I expectedJquery Cycle 插件没有像我预期的那样工作
【发布时间】：2012-03-22 23:11:33
【问题描述】：

我正在尝试在我的新网站上实现滚动画廊。我正在使用 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-->

【问题讨论】：

您包含哪个版本的插件？完整版还是精简版？
据我所知，我使用的是完整版。
循环脚本之前是否还包含了最新版本的jQuery？
我的文档声明“Jquery v1.7.2”，是最新的吗？我似乎找不到任何更新的东西。
那是最新的版本，是的，但是它包含在循环脚本之前吗？刚刚测试了你的代码，它工作正常，除了你的 javascript 上的一个小错误阻止它在 IE 中工作但应该在其他浏览器上工作（它的这个 pause: 1, 删除那个额外的逗号）我不明白为什么它不在职的。你在循环脚本之前包含jQuery脚本吗？

标签： javascript jquery css plugins cycle

【解决方案1】：

除了我们在 cmets 上检查的那个逗号错误之外，在 chrome 中，#slide 容器的高度没有得到计算，但您的滑块工作得很好。您所要做的就是为该容器添加一个高度，然后您的滑块就可以正常工作，如下所示：

#slides {
  height: 243px;
}

【讨论】：

太棒了！非常感谢你。奇怪的是 chrome 没有计算我的滑块高度。每天学习新东西：谢谢！
我很高兴，我知道它一定很时髦！顺便说一句，如果答案令人满意，请记得检查答案旁边的绿色复选标记，以结束问题。

【解决方案2】：

您的 float:left 似乎与 div 有关。您可以将 li 标签设为浮动。 Check This slider

【讨论】：

当滑块位于我网站上的另一个 div 旁边时，该 div 向左浮动。在对我的测试文档进行了一些测试后，它没有修复滑块:(
请使用 firebug 来检测您的真实 UL 场所。可能是因为您在 cycle() 中有 hide() 或类似代码，或者您忘记确定 #slides 宽度。另请检查位置：绝对； z指数：6；对于#slides

【解决方案3】：

那是：

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

应该是：

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

【讨论】：