Question

我已经尝试了一切可以想到的循环2寻呼机工作，但我尝试过的任何东西都没有任何区别。我已经从演示页面复制并粘贴了示例，我在这里包含了代码 - 它非常小。 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;}

Answer 1

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

我的问题是寻呼机根本没有出现 - ＆gt;它就像隐藏在图像下面一样。

最后，我将overflow: hidden设置为overflow: visible，并按宣传方式工作。

Answer 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;}

jQuery cycle2 pager无法正常工作

2 个答案: