jQuery cycle2 寻呼机不工作

Posted 2023-02-26

技术标签:

【中文标题】jQuery cycle2 寻呼机不工作【英文标题】：jQuery cycle2 pager not working 【发布时间】：2013-11-21 10:28:30 【问题描述】：

我已经尝试了一切可以让 cycle2 寻呼机工作的方法，但我尝试过的一切都没有任何改变。我从演示页面复制并粘贴了示例，并在此处包含了代码 - 它非常小。 cycle.css 文件是演示中 CSS 文件的完全副本，没有任何修改。

什么症状？寻呼机以非常小的黑色子弹形式出现，位于页面的左侧。我期待什么？较大的彩色子弹位于演示中的中心位置。

我搜索了很多其他帖子，但没有找到答案。任何人都可以帮忙吗？如果你想看看我看到的，那么这里是网址：http://school4kids.org/test-cycle2.asp

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!-- Stylesheets -->
<link rel=stylesheet href="http://fonts.googleapis.com/css?family=Acme">
<link rel=stylesheet href="http://www.malsup.com/jquery/cycle2/site.css">
<link rel=stylesheet href="http://www.malsup.com/jquery/cycle2/demo/demo-slideshow.css">

<!-- javascripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>


</head>

<body>


<br><br>

<div class="example-pager"></div>
<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    data-cycle-pager=".example-pager"
    >
    <!-- empty element for pager links -->
    <div class="cycle-pager"></div>
    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
<div class="example-pager"></div>

<br><br>


</body>

</html>

附加信息经过更多探索，我意识到 site.css 中有一些东西在发挥作用，如果没有该文件，事情就无法工作。我将它剥离到最低限度（我不想要它，因为它传达了我自己的样式）并发现将子弹放在正确位置所需的部件。将此与先前的解决方案结合起来，然后一切正常。我现在不包含演示中的任何样式文件，而是创建了自己的 css 文件，其中仅包含以下内容：

.cycle-pager  display: block; 

.example-pager  text-align: center; width: 100%; z-index: 500; top: 10px; overflow: hidden; font-family:  Arial; font-size: 14px; line-height: 18px; color: #333; 
.example-pager span  font-size: 50px; width: 16px; height: 16px; display: inline-block; color: #ddd; 
.example-pager span.cycle-pager-active  color: #D69746;
.exmaple-pager > *  cursor: pointer;

【问题讨论】：

我一直在玩这个。现在你会看到我链接到了实际的演示 css。如果您愿意，可以按照代码中的链接检索 css 文件。正如我所说，这是官方的 css 文件。 【参考方案1】：

Nikhil 的回答对我不起作用，但它让我更深入地研究 CSS 并尝试更多的东西。

我的问题是寻呼机根本没有显示 -> 它就像隐藏在图像下方。

最后我将overflow: hidden 设置为overflow: visible，它就像宣传的那样工作。

【讨论】：

我一直在寻找解决方案。您的“设置溢出：隐藏到溢出：可见”成功了。非常感谢分享！【参考方案2】：

使用以下 css（在您的 html 中放入 head 标签）。它将按预期工作。

Demo

CSS：

.external  position: static 
.external > *  margin: 0 5px 
.cycle-pager  display: block; 

.example-pager  text-align: center; width: 100%; z-index: 500; top: 10px; overflow: hidden; 
.example-pager span  font-size: 50px; width: 16px; height: 16px; display: inline-block; color: #ddd; 
.example-pager span.cycle-pager-active  color: #D69746;
.example-pager > *  cursor: pointer;

【讨论】：

好的，谢谢。哪一块魔法成功了？我很困惑为什么演示 css 不起作用。此样式不存在于演示 css 中，而是存在于演示页面 html 的 head 标记中。可能是因为定制目的。经过更多探索，我意识到 site.css 中有一些东西在发挥作用，如果没有该文件，事情就无法工作。我将它剥离到最低限度（我不想要它，因为它传达了我自己的样式）并发现将子弹放在正确位置所需的部分。是的，现在一切正常。抱歉，只是想习惯如何与论坛互动。我编辑了我的问题以发布解决方案，因为它不会让我回答我自己的问题。解决方案是结合你的建议加上意识到 site.css 中有东西

以上是关于jQuery cycle2 寻呼机不工作的主要内容，如果未能解决你的问题，请参考以下文章

无法让 cycle2 轮播与文本叠加一起使用

寻呼机在带有 JSON 的 jqGrid 中没有按预期工作

使用 ajax 时，Tablesorter 禁用分页器按钮不起作用

css 来自http://jquery.malsup.com/cycle2/demo/demo-slideshow.css

Vimeo 嵌入 Cycle2

jQuery Tablesorter 过滤器不更新寻呼机